使用Jest做单元测试

最新推荐文章于 2024-04-07 16:34:40 发布

xiaozhuo_tang

最新推荐文章于 2024-04-07 16:34:40 发布

阅读量2k

点赞数

分类专栏：单元测试文章标签：单元测试 jest

本文链接：https://blog.csdn.net/xiaozhuo_tang/article/details/106378337

版权

Jest是什么？

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
Jest是一个关注于简单使用且令人愉悦的JavaScript测试框架，它能够和Babel、TypeScript、Node、React、Angular、Vue等项目配合使用；

起步

安装jest

npm i -D jest

通过script开启单元测试

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

使用TypeScript和Babel

npm i -D @babel/preset-env @babel/core @babel/preset-typescript npm i -D babel-jest

配置文件

配置babel.config.js：react和typescript，配置env当process.env.NODE_ENV是test时对.less、.sass、.styl进行忽略避免在jest测试时对样式文件作出响应。

// babel.config.js
module.exports = {
   
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    '@babel/preset-react'
  ],
  env: {
   
	test: {
   
		plugins: ['babel-plugin-transform-require-ignore', {
   
			extensions: ['.less', '.sass', '.styl']
		}]
	}	
  }
};

配置jest.config.js

module.exports = {
   
    rootDir: './test/', // 测试目录
    // 对jsx、tsx、js、ts文件采用babel-jest进行转换
    transform: {
   
        '^.+\\.[t|j]sx?$': 'babel-jest',
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]s?$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    collectCoverage: true, // 统计覆盖率
    testEnvironment: 'jsdom', // 测试环境，默认为”jsdom“
    collectCoverageFrom: ['**/*.ts'],
    coverageDirectory: './coverage', // 测试覆盖率的文档
    globals: {
    
        window: {
   }, // 设置全局对象window
    },
    setupFiles: ['<rootDir>/setupFiles/shim.js'], 
    // 测试前执行的文件，主要可以补齐模拟一些在node环境下的方法但又window下需要使用
};

// shim.js
// 在测试环境下模拟requestAnimationFrame函数
global.window.requestAnimationFrame = function (cb) {
   
    return setTimeout(() => {
   
        cb();
    }, 0);
};

编写测试用例

使用Matchers编写测试用例，例如：

test('测试用例名称', () => {
   
	expect(2 + 2).toBe(4);
	expect(2 + 2).not.toBe(3);
	expect({
    one: 1, two: 2 }).toEqual({
    one: 1, two: 2 });
	expect(null).toBeNull();
	expect(null).toBeUndefined();