Jest 单元测试快速上手指南

技术交流群: https://fiora.suisuijiang.com/
原文链接: https://github.com/yinxin630/...

Jest 是一款简单, 容易上手且功能十分强大的测试框架

安装

yarn add -D jest

使用

创建 test 目录, 添加 plus.spec.js 文件

describe('example', () => {
    it('should equal 2', () => {
        expect(1 + 1).toBe(2);
    });
});

执行 yarn jest 或者 yarn jest test/plus.spec.js 运行测试用例

成功结果

失败结果

输出测试覆盖率

在根目录创建 jest.config.js 配置文件

module.exports = {
    collectCoverage: true,
};

创建 plus.js 模块

module.exports = function plus(a, b) {
    return a + b;
}

修改测试用例使用模块

const plus = require('../plus');

describe('example', () => {
    it('should equal 2', () => {
        expect(plus(1, 1)).toBe(2);
    });
});

再次执行测试, 输出覆盖率如下

在浏览器中打开 coverage/lcov-report/index.html 可以浏览覆盖率结果页面

忽略部分文件或者代码行的覆盖率

修改 plus.ts 模块, 添加更多分支

export default function plus(a: number, b: number) {
    if (a + b > 100) {
        return 0;
    } else if (a + b < 0) {
        return 0;
    } else {
        return a + b;
    }
}

重新执行测试, 覆盖率输出结果

你可以完善测试用例, 或者可能有些文件(譬如 config)和代码分支并不需要测试, 可以将其在测试覆盖率结果中排除, 参考如下配置

1. 忽略目录下所有文件

在 jest.config.js 中添加

collectCoverageFrom: [
    '**/*.{ts,tsx}',
    '!**/node_modules/**',
    '!**/[directory path]/**',
],

以 ! 开头的表示忽略与其匹配的文件

1. 忽略单个文件

在该文件顶部添加 /* istanbul ignore file */

1. 忽略一个函数, 一块分支逻辑或者一行代码

在该函数, 分支逻辑或者代码行的上一行添加 /* istanbul ignore next */

支持 Typescript

执行 yarn add -D typescript ts-jest @types/jest 安装 typescript 和声明
并在 jest.config.js 中添加 preset: 'ts-jest'

将 plus.js 重命名为 plus.ts

export default function plus(a: number, b: number) {
    return a + b;
}

同样的, 将 plus.spec.js 重命名为 plus.spec.ts

import plus from '../plus'

describe('example', () => {
    it('should equal 2', () => {
        expect(plus(1, 1)).toBe(2);
    });
});

执行测试, 结果和之前一致

执行单测时不校验 ts 类型

有时你可能会希望不校验 ts 类型, 仅执行代码测试, 比如需要在 CI 中将类型校验和单元测试分为两个任务
在 jest.config.js 中添加如下内容

globals: {
    'ts-jest': {
        isolatedModules: true,
    },
}

测试 React 组件

安装 react 依赖 yarn add react react-dom 和声明 yarn add -D @types/react
安装 react 测试库 yarn add -D @testing-library/react @testing-library/jest-dom

添加 typescript 配置文件 tsconfig.json

{
    "compilerOptions": {
        "target": "es2018",
        "strict": true,
        "moduleResolution": "node",
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "lib": ["es2015", "es2016", "es2017", "dom"]
    },
    "exclude": ["node_modules"]
}

新增测试组件 Title.tsx

import React from 'react';

function Title() {
    return (
        
Title
    );
}

export default Title;

新增测试用例 test/Title.spec.tsx

/**
 * @jest-environment jsdom
 */

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Title from '../Title';

describe('Title', () => {
    it('should render without error', () => {
        const { getByText } = render(