单元测试做什么
编写用来做单元测试的js文件,并执行。
适合对谁做:
- 存放静态方法的js文件,如utils/utils.js
- 页面组件,即React Component
不适合对谁做: - 模板自带的js文件(不需要做改动,而且这种一般跑单测会有问题)
单元测试文件的特点:
- 一般有特定名称,如
*.test.js
- 一个写业务代码的文件对应一个写单测的文件,如
login.jsx login.test.js
单元测试怎么做
以一个最新版 ant design pro 模板项目为例。
- 安装需要的库。
npm install --save @testing-library/react @testing-library/jest-dom
- 若干文件需要配置。
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;
- 给页面组件写个单测试下
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();
});
- 跑!
npm run test
单元测试达到什么效果
提升代码可维护性、提高测试效率、提升开发人员水平...
(省略10000字)
单元测试遇到的问题
一个业务正常的代码文件,单测跑不过。
解决问题的思路
提供几个方向:
- jest.config.js 配置问题。
- tests\setupTests.js 全局测试脚本问题。
- src\pages\Welcome.test.js 单个的测试脚本问题。
- 页面文件本身的问题。
- 页面文件引用的库的问题(umi插件可能会和Jest不兼容)。