feat: support rstest in testing library

.changeset/easy-waves-pump.md

@@ -0,0 +1,6 @@
+---
+"@lynx-js/react-webpack-plugin": patch
+"@lynx-js/react-rsbuild-plugin": patch
+---
+
+Support rstest for testing library using a dedicated testing loader.

.changeset/red-lamps-arrive.md

@@ -0,0 +1,23 @@
+---
+"@lynx-js/react": patch
+---
+
+Support rstest for testing library, you can use rstest with RLTL now:
+
+```ts
+import { defineConfig } from '@rstest/core';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { rstestTestingLibraryPlugin } from '@lynx-js/react/testing-library/plugins';
+
+export default defineConfig({
+  plugins: [
+    rstestTestingLibraryPlugin(),
+    pluginReactLynx(),
+  ],
+  testEnvironment: 'jsdom',
+  setupFiles: [
+    require.resolve('@lynx-js/react/testing-library/setupFiles/rstest'),
+  ],
+  globals: true,
+});
+```

.github/workflows/test.yml

@@ -229,6 +229,24 @@ jobs:
         --no-cache
         --logHeapUsage
         --silent
+  test-rstest:
+    needs: build
+    uses: ./.github/workflows/workflow-test.yml
+    strategy:
+      matrix:
+        runs-on:
+          - name: Ubuntu
+            label: lynx-ubuntu-24.04-medium
+          - name: Windows
+            label: lynx-windows-2022-large
+    name: Rstest (${{ matrix.runs-on.name }})
+    secrets:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    with:
+      runs-on: ${{ matrix.runs-on.label }}
+      run: |
+        (cd packages/react/testing-library && pnpm run test:rs)
+        (cd packages/testing-library/examples/basic && pnpm test:rs)
   website:
     needs: build
     uses: ./.github/workflows/workflow-website.yml

package.json

@@ -20,6 +20,7 @@
     "@microsoft/api-extractor": "catalog:",
     "@rslib/core": "^0.10.5",
     "@rspack/core": "catalog:rspack",
+    "@rstest/core": "^0.0.8",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tsconfig/node20": "^20.1.6",
     "@tsconfig/strictest": "^2.0.5",

packages/react/package.json

@@ -90,10 +90,12 @@
       "types": "./testing-library/types/pure.d.ts",
       "default": "./testing-library/dist/pure.js"
     },
-    "./testing-library/vitest-config": {
-      "types": "./testing-library/types/vitest-config.d.ts",
-      "default": "./testing-library/dist/vitest.config.js"
+    "./testing-library/plugins": {
+      "types": "./testing-library/dist/plugins/index.d.ts",
+      "default": "./testing-library/dist/plugins/index.js"
     },
+    "./testing-library/setupFiles/vitest": "./testing-library/dist/setupFiles/vitest.js",
+    "./testing-library/setupFiles/rstest": "./testing-library/dist/setupFiles/rstest.js",
     "./package.json": "./package.json"
   },
   "types": "./types/react.d.ts",

packages/react/testing-library/package.json

@@ -7,11 +7,14 @@
     "build": "rslib build",
     "dev": "rslib build --watch",
     "test": "vitest",
+    "test:rs": "rstest run",
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
     "@lynx-js/react": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
     "@lynx-js/testing-environment": "workspace:*",
+    "@rsbuild/core": "catalog:rsbuild",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3"
   }

packages/react/testing-library/rslib.config.ts

@@ -1,16 +1,17 @@
-import { defineConfig, type rsbuild } from '@rslib/core';
+import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
   lib: [
     {
       format: 'esm',
       syntax: 'es2022',
-      dts: false,
+      dts: true,
       bundle: true,
       source: {
         entry: {
           'pure': './src/pure.jsx',
           'env/vitest': './src/env/vitest.ts',
+          'plugins/index': './src/plugins/index.ts',
         },
       },
       output: {
@@ -29,9 +30,7 @@ export default defineConfig({
       bundle: false,
       source: {
         entry: {
-          'index': './src/index.jsx',
-          'vitest.config': './src/vitest.config.js',
-          'vitest-global-setup': './src/vitest-global-setup.js',
+          'index': ['./src/index.jsx', './src/env/*', './src/setupFiles/**/*.js'],
         },
       },
       output: {

packages/react/testing-library/rstest.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig } from '@rstest/core';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { rstestTestingLibraryPlugin } from './src/plugins';
+import type { RsbuildPlugin } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [
+    rstestTestingLibraryPlugin(),
+    pluginReactLynx(),
+    {
+      name: 'lynx:testing-library:plugin',
+      setup(api) {
+        api.modifyBundlerChain((chain, { CHAIN_ID }) => {
+          const rule = chain.module.rules.get(CHAIN_ID.RULE.JS);
+          const swcUse = rule.uses.entries().swc;
+          const originalOptions = swcUse.get('options') || {};
+          const newOptions = {
+            ...originalOptions,
+            jsc: {
+              ...originalOptions.jsc,
+              transform: {
+                ...((originalOptions.jsc?.transform)
+                  || {}),
+                // Keep our snapshot consistent with vitest
+                // class field will be undefined if not initialized
+                useDefineForClassFields: true,
+              },
+            },
+          };
+          swcUse.options(newOptions);
+        });
+      },
+    },
+  ] as RsbuildPlugin[],
+  source: {
+    define: {
+      __RSTEST__: 'true',
+    },
+  },
+  testEnvironment: 'jsdom',
+  setupFiles: [
+    require.resolve('@lynx-js/react/testing-library/setupFiles/rstest'),
+  ],
+  globals: true,
+  resolve: {
+    // in order to make our test case work for
+    // both vitest and rstest, we need to alias
+    // `vitest` to `@rstest/core`
+    alias: {
+      vitest: require.resolve('./vitest-polyfill.js'),
+    },
+  },
+});

packages/react/testing-library/src/__tests__/act.test.jsx

@@ -213,7 +213,7 @@ test('fireEvent triggers useEffect calls', async () => {
       [
         "rLynxChange",
         {
-          "data": "{"patchList":[{"snapshotPatch":[0,"__Card__:__snapshot_e8d0a_test_4",2,4,2,[1],0,null,3,4,3,[0],1,2,3,null,1,-1,2,null],"id":2}]}",
+          "data": "{"patchList":[{"snapshotPatch":[0,"__Card__:__snapshot_a6614_test_4",2,4,2,[1],0,null,3,4,3,[0],1,2,3,null,1,-1,2,null],"id":2}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {
@@ -248,7 +248,7 @@ test('fireEvent triggers useEffect calls', async () => {
             ],
             "extraProps": undefined,
             "id": 2,
-            "type": "__Card__:__snapshot_e8d0a_test_4",
+            "type": "__Card__:__snapshot_a6614_test_4",
             "values": [
               "2:0:",
             ],
@@ -273,7 +273,7 @@ test('fireEvent triggers useEffect calls', async () => {
         ],
         "extraProps": undefined,
         "id": 2,
-        "type": "__Card__:__snapshot_e8d0a_test_4",
+        "type": "__Card__:__snapshot_a6614_test_4",
         "values": [
           "2:0:",
         ],
@@ -297,7 +297,7 @@ test('fireEvent triggers useEffect calls', async () => {
       [
         "rLynxChange",
         {
-          "data": "{"patchList":[{"snapshotPatch":[0,"__Card__:__snapshot_e8d0a_test_4",2,4,2,[1],0,null,3,4,3,[0],1,2,3,null,1,-1,2,null],"id":2}]}",
+          "data": "{"patchList":[{"snapshotPatch":[0,"__Card__:__snapshot_a6614_test_4",2,4,2,[1],0,null,3,4,3,[0],1,2,3,null,1,-1,2,null],"id":2}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {

packages/react/testing-library/src/__tests__/alog.test.jsx

@@ -6,8 +6,15 @@ import { act } from 'preact/test-utils';
 
 describe('alog', () => {
   test('should log', async () => {
-    vi.spyOn(lynxTestingEnv.mainThread.console, 'alog');
-    vi.spyOn(lynxTestingEnv.backgroundThread.console, 'alog');
+    let mainThreadALogCalls = [];
+    let backgroundThreadALogCalls = [];
+    console.alog = (...args) => {
+      if (__MAIN_THREAD__) {
+        mainThreadALogCalls.push(args);
+      } else {
+        backgroundThreadALogCalls.push(args);
+      }
+    };
 
     let _setCount;
     function App() {
@@ -35,67 +42,64 @@ describe('alog', () => {
       enableBackgroundThread: true,
     });
 
-    expect(lynxTestingEnv.mainThread.console.alog.mock.calls).toMatchInlineSnapshot(`
+    expect(mainThreadALogCalls).toMatchInlineSnapshot(`
       [
         [
-          "[MainThread Component Render] name: ClassComponent, uniqID: __Card__:__snapshot_426db_test_2, __id: -6",
+          "[MainThread Component Render] name: ClassComponent, uniqID: __Card__:__snapshot_895c1_test_2, __id: -6",
         ],
         [
-          "[MainThread Component Render] name: FunctionComponent, uniqID: __Card__:__snapshot_426db_test_3, __id: -7",
+          "[MainThread Component Render] name: FunctionComponent, uniqID: __Card__:__snapshot_895c1_test_3, __id: -7",
         ],
         [
-          "[MainThread Component Render] name: App, uniqID: __Card__:__snapshot_426db_test_1, __id: -2",
+          "[MainThread Component Render] name: App, uniqID: __Card__:__snapshot_895c1_test_1, __id: -2",
         ],
         [
-          "[MainThread Component Render] name: Fragment, uniqID: __Card__:__snapshot_426db_test_1, __id: -2",
+          "[MainThread Component Render] name: Fragment, uniqID: __Card__:__snapshot_895c1_test_1, __id: -2",
         ],
       ]
     `);
-    expect(lynxTestingEnv.backgroundThread.console.alog.mock.calls).toMatchInlineSnapshot(`
+    expect(backgroundThreadALogCalls).toMatchInlineSnapshot(`
       [
         [
-          "[BackgroundThread Component Render] name: ClassComponent, uniqID: __Card__:__snapshot_426db_test_2, __id: 6",
+          "[BackgroundThread Component Render] name: ClassComponent, uniqID: __Card__:__snapshot_895c1_test_2, __id: 6",
         ],
         [
-          "[BackgroundThread Component Render] name: FunctionComponent, uniqID: __Card__:__snapshot_426db_test_3, __id: 7",
+          "[BackgroundThread Component Render] name: FunctionComponent, uniqID: __Card__:__snapshot_895c1_test_3, __id: 7",
         ],
         [
-          "[BackgroundThread Component Render] name: App, uniqID: __Card__:__snapshot_426db_test_1, __id: 2",
+          "[BackgroundThread Component Render] name: App, uniqID: __Card__:__snapshot_895c1_test_1, __id: 2",
         ],
         [
-          "[BackgroundThread Component Render] name: Fragment, uniqID: __Card__:__snapshot_426db_test_1, __id: 2",
+          "[BackgroundThread Component Render] name: Fragment, uniqID: __Card__:__snapshot_895c1_test_1, __id: 2",
         ],
       ]
     `);
 
-    lynxTestingEnv.mainThread.console.alog.mockClear();
-    lynxTestingEnv.backgroundThread.console.alog.mockClear();
+    mainThreadALogCalls = [];
+    backgroundThreadALogCalls = [];
 
     act(() => {
       _setCount(0);
     });
 
-    expect(lynxTestingEnv.mainThread.console.alog.mock.calls).toMatchInlineSnapshot(`[]`);
-    expect(lynxTestingEnv.backgroundThread.console.alog.mock.calls).toMatchInlineSnapshot(`[]`);
-
-    lynxTestingEnv.mainThread.console.alog.mockClear();
-    lynxTestingEnv.backgroundThread.console.alog.mockClear();
+    mainThreadALogCalls = [];
+    backgroundThreadALogCalls = [];
 
     act(() => {
       _setCount(1);
     });
 
-    expect(lynxTestingEnv.mainThread.console.alog.mock.calls).toMatchInlineSnapshot(`[]`);
-    expect(lynxTestingEnv.backgroundThread.console.alog.mock.calls).toMatchInlineSnapshot(`
+    expect(mainThreadALogCalls).toMatchInlineSnapshot(`[]`);
+    expect(backgroundThreadALogCalls).toMatchInlineSnapshot(`
       [
         [
-          "[BackgroundThread Component Render] name: ClassComponent, uniqID: __Card__:__snapshot_426db_test_2, __id: -6",
+          "[BackgroundThread Component Render] name: ClassComponent, uniqID: __Card__:__snapshot_895c1_test_2, __id: -6",
         ],
         [
-          "[BackgroundThread Component Render] name: FunctionComponent, uniqID: __Card__:__snapshot_426db_test_3, __id: -7",
+          "[BackgroundThread Component Render] name: FunctionComponent, uniqID: __Card__:__snapshot_895c1_test_3, __id: -7",
         ],
         [
-          "[BackgroundThread Component Render] name: App, uniqID: __Card__:__snapshot_426db_test_1, __id: -2",
+          "[BackgroundThread Component Render] name: App, uniqID: __Card__:__snapshot_895c1_test_1, __id: -2",
         ],
       ]
     `);

packages/react/testing-library/src/__tests__/auto-cleanup-skip.test.jsx

@@ -1,3 +1,5 @@
+import { beforeAll, test, expect } from 'vitest';
+
 let render;
 
 beforeAll(async () => {

packages/react/testing-library/src/__tests__/cleanup.test.jsx

@@ -1,4 +1,4 @@
-import { expect } from 'vitest';
+import { expect, vi } from 'vitest';
 import { render, cleanup } from '..';
 import { Component } from '@lynx-js/react';
 

packages/react/testing-library/src/__tests__/end-to-end.test.jsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { Component } from 'preact';
-import { expect } from 'vitest';
+import { expect, vi } from 'vitest';
 import { render, screen, waitForElementToBeRemoved } from '..';
 import { snapshotInstanceManager } from '../../../runtime/lib/snapshot.js';
 
@@ -67,7 +67,7 @@ test('state change will cause re-render', async () => {
             "children": undefined,
             "extraProps": undefined,
             "id": 2,
-            "type": "__Card__:__snapshot_354a3_test_1",
+            "type": "__Card__:__snapshot_2f675_test_1",
             "values": undefined,
           },
         ],
@@ -80,7 +80,7 @@ test('state change will cause re-render', async () => {
         "children": undefined,
         "extraProps": undefined,
         "id": 2,
-        "type": "__Card__:__snapshot_354a3_test_1",
+        "type": "__Card__:__snapshot_2f675_test_1",
         "values": undefined,
       },
     }
@@ -100,7 +100,7 @@ test('state change will cause re-render', async () => {
       [
         "rLynxChange",
         {
-          "data": "{"patchList":[{"snapshotPatch":[0,"__Card__:__snapshot_354a3_test_1",2,1,-1,2,null],"id":2}]}",
+          "data": "{"patchList":[{"snapshotPatch":[0,"__Card__:__snapshot_2f675_test_1",2,1,-1,2,null],"id":2}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {
@@ -118,7 +118,7 @@ test('state change will cause re-render', async () => {
       [
         "rLynxChange",
         {
-          "data": "{"patchList":[{"id":3,"snapshotPatch":[2,-1,2,0,"__Card__:__snapshot_354a3_test_2",3,0,null,4,3,4,0,"Hello World",1,3,4,null,1,-1,3,null]}]}",
+          "data": "{"patchList":[{"id":3,"snapshotPatch":[2,-1,2,0,"__Card__:__snapshot_2f675_test_2",3,0,null,4,3,4,0,"Hello World",1,3,4,null,1,-1,3,null]}]}",
           "patchOptions": {
             "pipelineOptions": {
               "dsl": "reactLynx",