使用Vite创建React应用的现代方法 - 第3部分
#javascript #react #jest #unittest

单位测试

我们将使用最流行的单元测试框架进行Jest。

  • 安装必要的软件包 
pnpm add -D jest @types/jest ts-jest ts-node
pnpm add -D @testing-library/react jest-environment-jsdom
pnpm add -D @testing-library/jest-dom @types/testing-library__jest-dom
中运行JSDOM
软件包 目的
是 测试跑步者
TS-IS 用于在打字稿支持的应用程序中开玩笑。
TS节点 用于在TS扩展中创建开玩笑的配置文件
开玩笑的环境 - jsdom 用于在Jest React App
@testing-library/react React测试库
@testing-library/jest-dom React测试库DOM主张支持
@types/jest， @types/testing-library__jest-dom 开玩笑和JSDOM的类型库
  • Jest在模拟的DOM环境中运行我们的测试，因此样式导入和SVG导入将丢弃错误。这些进口不会在测试环境中添加任何价值，因此“开玩笑”团队建议我们嘲笑这些进口。因此 
mkdir __mocks__
echo "export {};" > __mocks__/style.ts
echo "export default 'SvgrURL';\nexport const ReactComponent = 'div';" > __mocks__/svg.ts
  • 创建src/setupTests.ts文件并使用以下内容更新。 
 touch src/setupTests.ts

// This import will add the DOM related assertions support to the expect statement.
import '@testing-library/jest-dom';

beforeAll(() => {
  // Add your global beforeAll logics
});

beforeEach(() => {
  // Add your globalbeforeEach logics
});

afterAll(() => {
  // Add your global afterAll logics
});

afterEach(() => {
  // Add your global afterEach logics
});
  • 创建jest.config.ts文件，并使用下面的配置更新。 
 touch jest.config.ts

export default {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '\\.svg$': '<rootDir>/__mocks__/svg.ts',
    '^.+\\.css': '<rootDir>/__mocks__/style.ts',
    '^src/(.*)$': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  modulePathIgnorePatterns: ['./dist/'],
  coveragePathIgnorePatterns: [],
  collectCoverageFrom: ['./src/**/*.ts', '!./src/**/*.test.ts'],
  coverageThreshold: {
    global: {
      branches: 100,
      functions: 100,
      lines: 100,
      statements: 100,
    },
  },
};
  • 创建jest.ci-config.ts文件，并使用下面的配置更新。 
 touch jest.ci-config.ts

import config from './jest.config';

export default {
  ...config,
  coverageThreshold: {},
};
  • 为应用程序组件创建一个测试文件，并按照下面的方式进行更新， 
touch src/app.test.tsx

import { render, screen } from '@testing-library/react';
import { App } from './app';

describe('Component | App', () => {
  it('should render the app component', async () => {
    render(<App />);
    expect(screen.getByText('Rendered from react app')).toBeInTheDocument();
  });
});
  • 更新用于运行测试的软件包脚本 
npm pkg set scripts.test="jest" 
npm pkg set scripts.test:coverage="jest --coverage"
npm pkg set scripts.test:ci="jest --coverage --config='./jest.ci-config.ts'"
  • 运行测试 
  pnpm test

如果您在运行测试时遇到以下问题，请添加esModuleInterop Prop并将其设置为tsconfig.json文件中的true。

If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
  • 运行特定的测试使用-t param。 
  pnpm test -- -t "add"

样品回购

该系列的代码托管在github here中。

请看一下GitHub回购，让我知道您的反馈，在评论部分中查询。