Jest

Jest是facebook出品的JavaScript单元测试软件.

参考资料

中文文档:

http://facebook.github.io/jest/docs/zh-Hans/getting-started.html

官方示例代码:

https://github.com/facebook/jest/tree/master/examples

API 接口列表: http://facebook.github.io/jest/docs/en/jest-object.html#content

初尝 Jest 单元测试: http://imweb.io/topic/592aab6eff03ef1a4ef15c51

Jest官方博客: https://facebook.github.io/jest/blog

https://dev.to/preslavrachev/testing-react-native-applications-part-i-jest

https://stackoverflow.com/questions/40449434/mocking-globals-in-jest

ant design的测试(非常简单): https://github.com/ant-design/ant-design-mobile/blob/master/tests/shared/demoTest.js

https://facebook.github.io/jest/docs/jest-object.html

https://github.com/wheresrhys/fetch-mock

https://www.snip2code.com/Snippet/1682585/Mock-Fetch-with-Jest/

http://www.wheresrhys.co.uk/fetch-mock/api

全栈React: 第25天 使用Enzyme做更好的测试 http://zcfy.cc/article/fullstack-react-better-testing-with-enzyme-3806.html

https://facebook.github.io/react/docs/test-utils.html

快照测试如何对比不同状态下的组件?

安装命令行工具

npm install -g jest

运行测试

在 WebStorm中运行

打开__tests__中的文件, 点击行号右侧的运行小箭头即可. 或者右键点击, 选择 Run xx.js

命令行运行

运行所有测试 (默认):

cd __tests__
jest

运行指定测试, 通过命名规则或者指定文件名:

jest my-test #or
jest path/to/my-test.js

只针对 hg/git 中已修改的文件运行测试 (未提交的文件):

jest -o

运行文件 path/to/fileA.jspath/to/fileB.js的关联测试:

jest --findRelatedTests path/to/fileA.js path/to/fileB.js

Run tests that match this spec name (match against the name in describe or test, basically).

jest -t name-of-spec

监视模式运行:

jest --watch #runs jest -o by default
jest --watchAll #runs all tests

监视模式下也可以指定文件名或者路径来集中处理指定组的测试.

使用npm脚本运行

在package.json中添加配置项:

"scripts": {
...
  "test": "jest",
},
...,
"devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.2",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native",
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "verbose": true,
    "collectCoverage": true,
    "moduleFileExtensions": [
      "js"
    ],
    "globals": {
      "__DEV__": true
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-navigation)/"
    ]
  },

注意下面代码是为了解决ES6语法的库运行时的报错问题.

"transform": { "^.+\\.js$": "babel-jest"}

然后可以运行:

npm test

完整的命令行选项请参考: https://facebook.github.io/jest/docs/cli.html

延迟判断测试

有时候某些测试必须等待几个毫秒来执行, 这时候就需要用到延迟判断. 典型的场景如下: App中发起了一次网络请求, 然后根据返回的数据更新了一些状态. 虽然网络请求使用mock会很快, 但是整个执行过程并不是同步的, 究竟多久执行完也是无法确定的, 因此需要稍微延迟一下进行状态判断测试.

// 延迟等待判断的测试, 参考: https://github.com/facebook/jest/issues/42
// 注意done参数一定不要漏掉了

test("takes a long time", function(done) {
    // do something
    setTimeout(function() {
        // run your expectation
        expect(0).not.toBe(10);
        done();
    }, 1000);
});

// 简化等效写法
test('real timer ', (done) => {
    setTimeout(function() {
        // run your expectation
        expect(0).not.toBe(10);
        done();
    }, 1000);
});

常见错误及解决

import语法不对

https://stackoverflow.com/questions/43514455/react-nativejestsyntaxerror-unexpected-token-import

Test suite failed to run Invariant Violation: Native module cannot be null.

​ at invariant (node_modules/fbjs/lib/invariant.js:44:7)

​ at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)

​ at Object. (node_modules/react-native/Libraries/Network/NetInfo.js:20:25)

​ at Object.get NetInfo [as NetInfo] (node_modules/react-native/Libraries/react-native/react-native.js:93:22)

​ at new NetInfoSingleton (app/util/NetInfoSingleton.js:24:13)

​ at Object. (app/util/NetInfoSingleton.js:48:25)

参考: https://github.com/facebook/jest/issues/2208

需要mock native的一些行为. 这个导致RN测试比较难做.

refs测试子组件找不到如何解决?

Refs are null in Jest snapshot tests with react-test-renderer

https://github.com/facebook/jest/issues/42

解决: 测试之前需要mock一些假的refs代码

let instance = wrapper.instance();  
instance.refs = {timerButton: { state: {counting: false}}};
    instance._requestSMSCode();

    // 使用真正的定时器, 否则异步执行会立即返回, 导致状态判断出错
    jest.useRealTimers();

    setTimeout(function() {
        // run your expectation
        expect(instance.state.verifyText).toEqual('需要图形码44');
        console.log("instance.state", instance.state);
        console.log("instance.refs", instance.refs);
        done();
    }, 1000);

下面一些内容则和Jest配置有关. 参考: https://facebook.github.io/jest/docs/en/configuration.html

代码中import了json资源但是提示访问不到?

https://github.com/facebook/jest/issues/238

import xxx from '../data/myjson';// myjson.json

出错信息: Cannot find module '../data/myjson' from 'xxxTest.js'

解决: 修改package.json中的jest配置, 加入json扩展名

"moduleFileExtensions": [
       "js", "jsx", "json" 
 ]

mock代码被当做测试执行报错?

https://github.com/facebook/jest/tree/master/examples/manual-mocks

参考这里的目录结构, __tests____mocks__分开存放test.js文件和mock的类.

或者修改文件package.json中的jest配置信息加入roots信息指定测试代码所在目录:

"jest": {
  ...
  "roots": [
    "<rootDir>/__tests__/"
  ],
  "testRegex": ".test.js$",
  ...
}

Jest测试结果生成HTML报表

https://github.com/Hargne/jest-html-reporter

安装: yarn add --dev react-test-renderer

在package.json 为jest增加配置属性:

"jest": {
  ...
  "testResultsProcessor": "./node_modules/jest-html-reporter"
  ...
}

创建报表的配置文件: jesthtmlreporter.config.json

{
  "pageTitle": "XXXX单元测试报告",
  "outputPath": "test-report/index.html", // 报表输出目录
  "includeFailureMsg": true
}

然后每次运行Jest都能自动生成报告.

Jest生成代码覆盖率报表

"collectCoverage": true,
"coverageReporters" : [
   "lcov"
],
"coverageDirectory" : "test-report",

最后列出一份比较完整的Jest配置文件(在package.json中):

"jest": {
  "automock": false,
  "setupFiles": [
    "./node_modules/react-native/jest/setup.js",
    "./setupJest.js"
  ],
  "preset": "react-native",
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "verbose": true,
  "collectCoverage": true,
  "coverageReporters" : [
     "lcov"
  ],
  "coverageDirectory" : "test-report",
  "moduleFileExtensions": [
     "js", "jsx", "json"
  ],
  "globals": {
    "__DEV__": true
  },
  "transform": {
    "^.+\\.js$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|react-navigation)/"
  ],
  "unmockedModulePathPatterns": [
    "node_modules/react/",
    "node_modules/react-native/Libraries"
  ],
  "testResultsProcessor": "./node_modules/jest-html-reporter"
}

WebStorm集成Jest

运行所有测试

Run > Edit Configurations, 然后点击 + 号按钮, 类别那里选择 Jest, 默认就会生成一个运行所有Test的Jest任务. 点击工具栏上的 运行 按钮即可.

WebStorm增加Jest函数补全提示

WebStorm – Preferences – Languages & Frameworks – JavaScript – Libraries, 点击 Download 然后找到列表页中的 Jest, 然后点击 Download and Install.