react之单元测试jest

什么是单元测试

顾名思义单元测试就是测试最小单元，我们的单元可能是一个函数，一个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);
});