web前端单元测试入门,以Ant Design Pro为例

单元测试做什么

编写用来做单元测试的js文件,并执行。

适合对谁做:

  • 存放静态方法的js文件,如utils/utils.js
  • 页面组件,即React Component
    不适合对谁做:
  • 模板自带的js文件(不需要做改动,而且这种一般跑单测会有问题)

单元测试文件的特点:

  • 一般有特定名称,如*.test.js
  • 一个写业务代码的文件对应一个写单测的文件,如 login.jsx login.test.js

单元测试怎么做

以一个最新版 ant design pro 模板项目为例。

  1. 安装需要的库。
npm install --save @testing-library/react @testing-library/jest-dom
  1. 若干文件需要配置。
    jest.config.js
module.exports = {
  testURL: ‘http://localhost:8000‘,
  testEnvironment: ‘./tests/PuppeteerEnvironment‘,
  verbose: false,
  setupFilesAfterEnv: [‘./tests/setupTests.js‘],
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: false,
    localStorage: null,
  },
  moduleNameMapper: {
    ‘^@/(.*)$‘: ‘<rootDir>/src/$1‘,
    ‘^@@/(.*)$‘: ‘<rootDir>/src/.umi/$1‘,
  },
  collectCoverage: true,
  collectCoverageFrom: [
    "src/pages/**/*.{js,jsx}",
    "!**/node_modules/**",
    "!**/vendor/**"
  ]
};

tests\setupTests.js

// do some test init
// react-testing-library 将您的组件显示为document.body,
// 这将为 jest-dom 添加一个自定义断言
import ‘@testing-library/jest-dom‘;

Object.defineProperty(window, ‘matchMedia‘, {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn(),
};

global.localStorage = localStorageMock;
  1. 给页面组件写个单测试下
    src\pages\Welcome.jsx
    有改动
import React from ‘react‘;
import { PageContainer } from ‘@ant-design/pro-layout‘;
import { Card, Alert, Typography } from ‘antd‘;
import { FormattedMessage } from ‘umi‘;
import styles from ‘./Welcome.less‘;

const CodePreview = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

export default () => {
  return (
    <PageContainer>
      <Card>
        <Alert
          message=‘更快更强的重型组件,已经发布。‘
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <Typography.Text strong>
          高级表格{‘ ‘}
          <a
            href="https://procomponents.ant.design/components/table"
            rel="noopener noreferrer"
            target="__blank"
          >
            欢迎使用
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
        <Typography.Text
          strong
          style={{
            marginBottom: 12,
          }}
        >
          高级布局{‘ ‘}
          <a
            href="https://procomponents.ant.design/components/layout"
            rel="noopener noreferrer"
            target="__blank"
          >
            欢迎使用
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
      </Card>
    </PageContainer>
  );
};

src\pages\Welcome.test.js
这个注释必须保留

/**
 * @jest-environment jsdom
 */

import React from ‘react‘;
import { render, screen } from ‘@testing-library/react‘;
import Welcome from ‘./Welcome‘;

it(‘renders welcome message‘, () => {
  render(<Welcome />);
  expect(screen.getByText(‘yarn add @ant-design/pro-table‘)).toBeInTheDocument();
});
  1. 跑!
npm run test

单元测试达到什么效果

提升代码可维护性、提高测试效率、提升开发人员水平...
(省略10000字)

单元测试遇到的问题

一个业务正常的代码文件,单测跑不过。

解决问题的思路

提供几个方向:

  • jest.config.js 配置问题。
  • tests\setupTests.js 全局测试脚本问题。
  • src\pages\Welcome.test.js 单个的测试脚本问题。
  • 页面文件本身的问题。
  • 页面文件引用的库的问题(umi插件可能会和Jest不兼容)。

web前端单元测试入门,以Ant Design Pro为例

上一篇:JS 事件流


下一篇:Linux curl命令