jest单元测试(一)

本文是以react-native的项目为前提,记录使用jest进行单元测试所遇到的一些问题。

  • 安装jest,babel-jest,babel-preset-react-native, 注意版本
  • npm install jest babel-jest babel-preset-react-native --save-dev
    
  • 在package.json中配置jest选项, 一般rn项目都是采用babel-preset-react-native来transform,这里的preset也设置为react-native。如果用其他transform规则,可自行设置。
  • "jest": {
        "preset": "react-native",
        "transformIgnorePatterns": [
          "node_modules/(?!(react-native|my-project|react-native-button)/)"
    
  • 在package.json中配置 jest运行命令, 之后在项目根目录下运行npm test就能开始测试,发现会提示找不到test的用例
  • "scripts": {
        "test": "jest --no-cache",
    
    No tests found
    
  • 在项目目录下新建_tests_目录, 然后就可以开始写用例了。新建个app.js文件,代码如下:
  • import View from 'react-native';
    import React from 'react';
    import App from '../App'; 
    // Note: test renderer must be required after react-native.
    import renderer from 'react-test-renderer';
    it('renders correctly', () => {
      const tree = renderer.create(
        <App />
    

    会得到如下:

     PASS  __tests__/App.js (6.086s)
      ✓ renders correctly (3972ms)
    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 total
    Time:        7.831s
    
  • 如果使用babel7,按如下方式添加babel-jest依赖
  • npm install babel-jest babel-core@^7.0.0-0 @babel/core --save-dev
    
  • 如果代码中有使用@修饰符,需要在.babelrc中开启,默认关闭。必须先安装这个插件。
  • "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    
  • 运行 npm jest ,默认是测试_tests_文件夹里的,实际还包括各文件夹下面的test.js文件

  • 在package.json文件中对jest进行黑名单白名单设置

  • "jest": {
        "transformIgnorePatterns": [
          //这里的设置意味要转译node_modules目录下的react-native,my-project,react-native-button等包,其余不转译,这里不设置一般会转译报错
          "node_modules/(?!(react-native|my-project|react-native-button)/)"
    
  • 因为jest 依赖babel编译,所以如果项目中混合多个babel版本一般会崩,截止到当前时间,react-native~0.55.4还是用的babel6,建议跟着官方走。同时要注意babel-plugin依赖的版本是否一致,栗子来了:
    为了支持修饰符@,babel6用的是babel-plugin-transform-decorators-legacy模块而babel7用的是@babel/plugin-proposal-decorators模块,babelrc依赖代码如下
  • "plugins": [
       "transform-decorators-legacy",