test: add e2e case

package.json

@@ -43,6 +43,7 @@
     "nano-staged": "^0.8.0",
     "playwright": "^1.45.3",
     "simple-git-hooks": "^2.11.1",
+    "styled-components": "^6.1.12",
     "tsup": "^8.2.3",
     "typescript": "^5.5.4"
   },

src/index.ts

@@ -1,3 +1,4 @@
+import { createRequire } from 'node:module';
 import type {
   MergedEnvironmentConfig,
   RsbuildConfig,
@@ -6,6 +7,8 @@ import type {
 } from '@rsbuild/core';
 import { type ConfigChain, reduceConfigs } from 'reduce-configs';
 
+const require = createRequire(import.meta.url);
+
 /**
  * The options of [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components).
  */

test/basic/index.test.ts

@@ -1,44 +1,39 @@
-import { dirname } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { expect, test } from '@playwright/test';
 import { createRsbuild } from '@rsbuild/core';
-import { pluginStyledComponents } from '../../src';
-import { getRandomPort } from '../helper';
+import { pluginStyledComponents } from '../../dist';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-test('should render page as expected', async ({ page }) => {
+test('should transform styled-components with pluginStyledComponents', async ({
+  page,
+}) => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
       plugins: [pluginStyledComponents()],
-      server: {
-        port: getRandomPort(),
+      output: {
+        minify: false,
+        filenameHash: false,
       },
     },
   });
 
-  const { server, urls } = await rsbuild.startDevServer();
-
-  await page.goto(urls[0]);
-  expect(await page.evaluate('window.test')).toBe(1);
+  await rsbuild.build();
 
-  await server.close();
-});
+  const indexJs = readFileSync(
+    join(rsbuild.context.distPath, 'static/js/index.js'),
+    'utf-8',
+  );
 
-test('should build succeed', async ({ page }) => {
-  const rsbuild = await createRsbuild({
-    cwd: __dirname,
-    rsbuildConfig: {
-      plugins: [pluginStyledComponents()],
-    },
-  });
+  expect(indexJs).toContain('div.withConfig');
 
-  await rsbuild.build();
   const { server, urls } = await rsbuild.preview();
 
   await page.goto(urls[0]);
-  expect(await page.evaluate('window.test')).toBe(1);
+  expect(await page.evaluate('typeof window.test')).toBe('object');
 
   await server.close();
 });

test/basic/src/index.js

@@ -1 +1,5 @@
-window.test = 1;
+import styled from 'styled-components';
+
+window.test = styled.div`
+  color: red;
+`;