test: add e2e test

Author: SoonIter

examples/react-component-bundle/rslib.config.ts

@@ -16,6 +16,8 @@ export default defineConfig({
       output: {
         distPath: {
           root: './dist/esm',
+          css: '.',
+          cssAsync: '.',
         },
       },
     },
@@ -25,6 +27,8 @@ export default defineConfig({
       output: {
         distPath: {
           root: './dist/cjs',
+          css: '.',
+          cssAsync: '.',
         },
       },
     },

tests/e2e/react-component/index.pw.test.ts

@@ -1,14 +1,7 @@
-import { expect, test } from '@playwright/test';
+import { type Page, expect, test } from '@playwright/test';
 import { dev } from 'test-helper/rsbuild';
 
-test('should render example "react-component" successfully', async ({
-  page,
-}) => {
-  const rsbuild = await dev({
-    cwd: __dirname,
-    page,
-  });
-
+async function counterCompShouldWork(page: Page) {
   const h2El = page.locator('h2');
   await expect(h2El).toHaveText('Counter: 0');
 
@@ -21,6 +14,59 @@ test('should render example "react-component" successfully', async ({
   await expect(h2El).toHaveText('Counter: 1');
   subtractEl?.click();
   await expect(h2El).toHaveText('Counter: 0');
+}
+
+async function styleShouldWork(page: Page) {
+  const h2El = page.locator('h2');
+  expect(h2El).toHaveCSS('font-size', '50px');
+
+  const buttonEl = page.locator('#root button');
+  const [subtractEl, addEl] = await buttonEl.all();
+  subtractEl &&
+    expect(subtractEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+  addEl && expect(addEl).toHaveCSS('background-color', 'rgb(255, 255, 0)');
+}
+
+test('should render example "react-component-bundle" successfully', async ({
+  page,
+}) => {
+  const rsbuild = await dev({
+    cwd: __dirname,
+    page,
+    rsbuildConfig: {
+      source: {
+        entry: {
+          index: './src/bundle.tsx',
+        },
+      },
+    },
+  });
+
+  await counterCompShouldWork(page);
+
+  await styleShouldWork(page);
+
+  await rsbuild.close();
+});
+
+test('should render example "react-component-bundle-false" successfully', async ({
+  page,
+}) => {
+  const rsbuild = await dev({
+    cwd: __dirname,
+    page,
+    rsbuildConfig: {
+      source: {
+        entry: {
+          index: './src/bundleFalse.tsx',
+        },
+      },
+    },
+  });
+
+  await counterCompShouldWork(page);
+
+  await styleShouldWork(page);
 
   await rsbuild.close();
 });

tests/e2e/react-component/package.json

@@ -1,5 +1,9 @@
 {
   "name": "react-component-e2e",
   "version": "1.0.0",
-  "private": true
+  "private": true,
+  "dependencies": {
+    "@examples/react-component-bundle": "workspace:*",
+    "@examples/react-component-bundle-false": "workspace:*"
+  }
 }

tests/e2e/react-component/src/App.tsx

@@ -0,0 +1,17 @@
+import { Counter } from '@examples/react-component-bundle';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '@examples/react-component-bundle/dist/esm/index.css';
+
+const App = () => (
+  <div>
+    <Counter />
+  </div>
+);
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

tests/e2e/react-component/src/bundle.tsx

@@ -1,6 +1,12 @@
+import { Counter } from '@examples/react-component-bundle-false';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+
+const App = () => (
+  <div>
+    <Counter />
+  </div>
+);
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(

tests/e2e/react-component/src/index.tsx renamed to tests/e2e/react-component/src/bundleFalse.tsx

@@ -7,7 +7,6 @@
     "test:e2e": "playwright test --pass-with-no-tests"
   },
   "dependencies": {
-    "@examples/react-component-bundle-false": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },