是时候从Jest迁移到Vitest了：rspack/rsbuild使用Vitest

Vitest vs Jest推荐阅读：

https://saucelabs.com/resources/blog/vitest-vs-jest-comparison

https://www.speakeasy.com/post/vitest-vs-jest

webpack/rsbuild add  Vitest

First, add Vitest related dependencie

pnpm  -D vitest @vitejs/plugin-react @testing-library/react @testing-library/jest-dom jsdom

其是我更加推荐：

pnpm i -D vitest @vitejs/plugin-react @vitest/coverage-istanbul @vitest/coverage-v8 @vitest/ui jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/testing-library__jest-dom

Then, create `vitest.config.ts` file at the root of your project

// vitest.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugin: [react()],
  test: {
    globals: true, // allows us to use vitest library methods in unit test without explicit imports
    environment: 'jsdom',
    setupFiles: './tests/setup.ts',  // path to setup file
    coverage: {
    
      exclude: ['src/generated/**/*.ts'],    // specify files to exclude
      reporter: ['text', 'html']  // customize reporters. don't forget to include 'html' if you use vitest-ui
    },
  },
});

下面是tdesign-start的配置

import path from 'path';
import { defineConfig } from 'vitest/config';
import { InlineConfig } from 'vitest/node';

// 单元测试相关配置
const testConfig: InlineConfig = {
  include:
    process.env.NODE_ENV === 'test-snap'
      ? ['test/snap/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
      : ['packages/components/**/__tests__/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  globals: true,
  environment: 'jsdom',
  testTimeout: 16000,
  testTransformMode: {
    web: ['\\.[jt]sx$'],
  },
  coverage: {
    provider: 'istanbul',
    reporter: ['text', 'json', 'html'],
    reportsDirectory: 'test/coverage',
  },
};

export default defineConfig({
  resolve: {
    alias: {
      'tdesign-react/es': path.resolve(__dirname, './packages/components'),
      'tdesign-react': path.resolve(__dirname, './packages/components'),
      '@test/utils': path.resolve(__dirname, './test/utils'),
    },
  },
  test: testConfig,
});

modify eslint config

module.exports = {
   // ...other configs
   rules: {
     'import/no-extraneous-dependencies': [
       'error',
       {
         devDependencies: ['vitest.config.ts'],
       },
     ],
   },
};

modify package.json

{
  "scripts": {
    "test": "vitest run" // "vitest run" will run the tests once while "vitest" will run the tests with watch mode turned on
  }
}

写单元测试

// ./tests/setup.ts
import '@testing-library/jest-dom/vitest'; //extends Vitest's expect method with methods from react-testing-library

import { cleanup } from '@testing-library/react';
import { expect, afterEach } from 'vitest';


// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
  cleanup();
});

更详细的，参看：https://vitest.dev/guide/

转载本站文章《是时候从Jest迁移到Vitest了：rspack/rsbuild使用Vitest》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2025_0327_9528.html