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/ninety-pants-tease.md

@@ -0,0 +1,5 @@
+---
+"create-rspeedy": patch
+---
+
+Add Rstest ReactLynx Testing Library template.

.changeset/red-lamps-arrive.md

@@ -0,0 +1,29 @@
+---
+"@lynx-js/react": patch
+---
+
+Support rstest for testing library, you can use rstest with RLTL now:
+
+Create a config file `rstest.config.ts` with the following content:
+
+```ts
+import { defineConfig, RstestConfig } from '@rstest/core';
+import lynxConfig from './lynx.config.js';
+
+export default defineConfig({
+  ...lynxConfig as RstestConfig,
+  testEnvironment: 'jsdom',
+  setupFiles: [
+    require.resolve('@lynx-js/react/testing-library/setupFiles/rstest'),
+  ],
+  globals: true,
+});
+```
+
+And then use rstest as usual:
+
+```bash
+$ rstest
+```
+
+For more usage detail, see https://rstest.rs/

.github/workflows/test.yml

@@ -159,6 +159,12 @@ jobs:
         pnpm run build --mode development
         pnpm run lint
         pnpm run test
+        npx --registry http://localhost:4873 create-rspeedy-canary@latest --template react-rstest-rltl --dir create-rspeedy-regression-rstest-rltl
+        cd create-rspeedy-regression-rstest-rltl
+        pnpm install --registry=http://localhost:4873
+        pnpm run build
+        pnpm run build --mode development
+        pnpm run test
   test-react:
     needs: build
     uses: ./.github/workflows/workflow-test.yml
@@ -182,6 +188,23 @@ 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: |
+        pnpm -r run rstest --testTimeout=50000
   test-rust:
     needs: build
     uses: ./.github/workflows/rust.yml
@@ -242,6 +265,7 @@ jobs:
       - test-api
       - test-publish
       - test-react
+      - test-rstest
       - test-rust
       - test-type
       - test-typos

package.json

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

packages/react/package.json

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

packages/react/testing-library/.npmignore

@@ -1,4 +1,3 @@
 *
-!dist/*
-!dist/env/*
+!dist/**/*
 !types/*

packages/react/testing-library/package.json

@@ -6,12 +6,15 @@
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",
+    "rstest": "rstest",
     "test": "vitest",
     "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.1",
     "@testing-library/jest-dom": "^6.6.4"
   }

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',
+          'env/index': './src/env/index.ts',
+          'plugins/index': './src/plugins/index.ts',
         },
       },
       output: {
@@ -29,9 +30,13 @@ 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/vitest.config.ts',
+            './src/env/vitest.ts',
+            './src/env/rstest.ts',
+            './src/setupFiles/**/*.js',
+          ],
         },
       },
       output: {

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

@@ -0,0 +1,36 @@
+import { defineConfig } from '@rstest/core';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+
+export default defineConfig({
+  tools: {
+    swc: {
+      jsc: {
+        transform: {
+          useDefineForClassFields: true,
+        },
+      },
+    },
+  },
+  plugins: [
+    pluginReactLynx(),
+  ],
+  source: {
+    define: {
+      __RSTEST__: 'true',
+      __ALOG__: '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.cjs'),
+    },
+  },
+});

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_268b9_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_268b9_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_268b9_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_268b9_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,16 @@ import { act } from 'preact/test-utils';
 
 describe('alog', () => {
   test('should log', async () => {
-    vi.spyOn(lynxTestingEnv.mainThread.console, 'alog');
-    vi.spyOn(lynxTestingEnv.backgroundThread.console, 'alog');
+    const originalAlog = console.alog;
+    let mainThreadALogCalls = [];
+    let backgroundThreadALogCalls = [];
+    console.alog = (...args) => {
+      if (__MAIN_THREAD__) {
+        mainThreadALogCalls.push(args);
+      } else {
+        backgroundThreadALogCalls.push(args);
+      }
+    };
 
     let _setCount;
     function App() {
@@ -35,69 +43,69 @@ 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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_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_d6fb6_test_1, __id: -2",
         ],
       ]
     `);
+
+    // Cleanup
+    console.alog = originalAlog;
   });
 });

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';