如何在不运行项目的情况下测试自研React组件库

1. 补充安装必要依赖 #

执行命令安装babel相关工具，用于转译ES模块、React和TypeScript代码：

npm install --save-dev @babel/preset-env @babel/preset-react @babel/preset-typescript babel-jest

2. 配置Babel #

在项目根目录创建babel.config.js，添加如下配置：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
};

3. 完善Jest配置 #

更新根目录的jest.config.js，添加转译规则和必要配置：

module.exports = {
  testEnvironment: "jsdom",
  // 用babel-jest转译TSX/JSX/TS/JS文件
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest'
  },
  // 识别的文件扩展名
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  // 测试文件匹配规则
  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)'],
  // 加载jest-dom的断言扩展（可选）
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
};

如果需要使用@testing-library/jest-dom的断言（比如toBeInTheDocument），创建jest.setup.js并添加：

import '@testing-library/jest-dom';

4. 修正测试文件路径 #

你的测试文件src/__tests__/MyComponent.test.js中，导入路径错误，修正后代码：

import React from "react";
import { render } from "@testing-library/react";
// 修正路径，从../components导入
import MyComponent from "../components/MyComponent";

test("renders MyComponent correctly", () => {
  const { getByText } = render(<MyComponent />);
  expect(getByText("Hello, World!")).toBeInTheDocument();
});

5. 添加测试脚本 #

在package.json的scripts中添加：

"scripts": {
  "test": "jest"
}

现在执行npm test即可运行测试，无需启动项目环境。

内容的提问来源于stack exchange，提问作者sNNNk