什么是单元测试
顾名思义单元测试就是测试最小单元,我们的单元可能是一个函数,一个button的样式,一个文案等等都可能是一个单元。那么我们在做需求的时候没有必要将所有的单元都做测试,那可能测试代码要比需求代码多得多呢。我们在做需求之前需要提前想好我们的测试用例,并针对测试用例编写测试代码,然后写需求代码。
为什么要进行单元测试
单元测试是在项目稳定之后,为了防止人员流动而不知道其中逻辑而进行的一种工作,可以帮助后来者理清代码逻辑。
Jest单元测试
写这个是做一个笔记,因为这都是概念性的东西。。用的时候看一看就好。
安装命令行(js/ts)
cnpm install ts-jest jest @types/jest --save-dev
修改配置
修改package.json
这样使用npm test就可以进行测试了;
"scripts": {
"test": "jest",
"coverage": "jest --coverage"//生成测试覆盖率报告
},
添加一个jest.config.js
文件
const transformIgnorePatterns = [
'/output/',
'node_modules/[^/]+?/(?!(es|node_modules)/)'
]
module.exports = {
setupFiles: [ '<rootDir>/jest.setup.js' ],//给每个测试文件添加额外的配置
moduleFileExtensions: [ 'ts', 'tsx', 'js', 'jsx' ],//测试模块中用到的文件的后缀名配置
modulePathIgnorePatterns: [ '/_site/', '/output/' ],
testPathIgnorePatterns: [//忽略该路径的文件测试
'/node_modules/',
'/output/',
'__mocks__',
'dekko',
'node'
],
transform: {
'^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest'
},
// "testMatch": [//检测指定文件夹下的内容
// "<rootDir>/tests/**/*.ts?(x)"
collectCoverage: true, // 是否收集测试时的覆盖率信息
collectCoverageFrom: ['<rootDir>/components/*.js'], // 哪些文件需要收集覆盖率信息
coverageDirectory:"<rootDir>/coverage",//测试覆盖率报告的文件夹
transformIgnorePatterns//测试过程不改变满足配置的文件
}
添加一个jest.setup.js文件,给每个测试文件添加额外的配置
var enzyme = require('enzyme')
var Adapter = require('enzyme-adapter-react-16')
global.fetch = require('jest-fetch-mock')
enzyme.configure({ adapter: new Adapter() })
jest遵循规则:
Jest会自动找到项目中所有使用 .spec.js 或 .test.js 文件命名的测试文件并执行。
以下是一个范例:
需要测试的函数或者组件在components里面。
使用插件生成html的报告
安装:
npm install jest-html-reporter --save-dev
修改package.json配置:
"scripts": {
"test:report": "jest --reporters='jest-html-reporter'",
"jest": "jest --no-cache",
"coverage": "jest --coverage"
},
//添加下面这句:
"jest": {
"testResultsProcessor": "./node_modules/jest-html-reporter"
}
运行npm run test:report
在根目录就生成test-report.html文件;
至于常用的jest。这里列举一下:
components/add.js
export default function add(a,b) {
return a+b
}
import sum from '../components/add'
__test__文件夹下:tool.test.js
import sum from '../components/add'
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});