一、搭建和配置

npm install jest --save-dev
npm install enzyme --save-dev
npm install enzyme-adapter-react-16 --save-dev
// es6 es7 tytpescript 语法转换 
npm install babel-jest ts-jest --save-dev 
 // 为快照提供了json的组件格式
npm install enzyme-to-json --save-dev 
 //  mock canvas
npm install jest-canvas-mock --save --dev

1.环境配置

// 在根目录创建jest.config.js并添加配置项module.exports = { 配置项 }

module.exports = {
    preset: "react-native",
    ...
}

moduleFileExtensions 设置Jest要执行测试文件的类型

moduleFileExtensions: ['ts','tsx','js','jsx']

transform设置一个入口，来告诉 Jest 要测试的资源文件

  // 如果项目中采用typescript为技术栈，需要设置ts-jest转译代码
  "^.+\\.(ts|tsx)$": "ts-jest",   
  // 设置babel-jest转译es6 es7代码
  "^.+\\.(js|jsx)$": "babel-jest",
  // Jest环境不能处理css和图片文件，需要通过工具来mock
  "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",

项目使用webpack配置的alias如何兼容？配置如下：

// Resolve alias in Jest not working
moduleNameMapper
     "^Controller/(.*)$": "/src/controller/$1",
        "^Service/(.*)$": "/src/service/$1",
           "^Store/(.*)$": "/src/store/$1",
          "^Styles/(.*)$": "/src/styles/$1",
          "^Router/(.*)$": "/src/router/$1",
          "^Common/(.*)$": "/src/common/$1"
};

transformIgnorePatterns 配置不忽略这些es库, 从而使babel-jest/jest-ts去处理它们

    transformIgnorePatterns: [
        "node_modules/(?!(react-native|react-native-button|react-router-native/)"
    ]

展示单元测试覆盖率

 collectCoverage: true

设置Jest配置文件

    setupFiles: [
        "/node_modules/jest-canvas-mock",
        "/jest.setup.js"
    ],

项目在中有使用到webpack.DefinePlugin插件在打包时根据运行环境动态注入的一些配置项，在单元测试如何去配置呢？

  // A set of global variables that need to be available in all test environments
  globals: {       
      __PAF_STAGE__: 16,
      __ISUSEI18N__: true
      __DEV__: true,
     ...
 }

testRnviroment 测试环境，默认值是：jsdom，可修改为node

  testEnvironment: 'jsdom'

rootDir 默认值：当前目录，一般是package.json所在的目录。

  rootDir: ' '

enzyme配置，在Jest.setup.js添加如下配置

  import Enzyme from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  Enzyme.configure({ adapter: new Adapter() });

备注：项目中常用的Jest环境配置的主要注意的配置项都已经说明清楚了，配置好这些你的项目环境配置基本可以运行了，接下来就可以写测试用例了，在写测试用例前，有必要跟大家介绍下Jest和enzyme在使用的时候注意点～

2、Jest Matchers

   Matchers俗称断言库，例如上面的expect().toBe()便是其中之一，其他常见用法如下：

1.相等断言

toBe(value)： 比较数字、字符串
toEqual(value)： 比较对象、数组
toBeNull()
toBeUndefined()

2.包含断言

toHaveProperty(keyPath, value)： 是否有对应的属性
toContain(item)： 是否包含对应的值，括号里写上数组、字符串
toMatch(regexpOrString)： 括号里写上正则

3.逻辑断言

toBeTruthy()
toBeFalsy()
在JavaScript中，有六个falsy值：false，0，''，null， undefined，和NaN。其他一切都是Truthy。

toBeGreaterThan(number)： 大于
toBeLessThan(number)： 小于

4.not

取反，用法见下面例子

test('matchers',()=>{
    const a = {
        hello: 'jest',
        hi :{
            name: 'jest'
        }
    }
   const b = {
    hello: 'jest',
    hi:{
        name: 'jest'
    }
}
  // 以下结果均为true
  expect(a).toEqual(b)
  expect([1,2,3]).toEqual([1,2,3])
  expect(null).toBeNull()
  expect([1,2,3]).toContain(1)
  expect(b).toHaveProperty('hi')
  expect('123').toContain('2')
  expect('123').toMatch(/^\d+$/)
  expect('123').not.toContain('4')
})

使用npx jest测试执行，结果为passed

3、enzyme支持三种方式的渲染：

浅渲染shallow
前面说过，Shallow Rendering用于将一个组件渲染成虚拟DOM对象，但是只渲染第一层，不渲染所有子组件，所以处理速度非常快。并且它不需要DOM环境，因为根本没有加载进DOM。
完全渲染mount
mount渲染用于将React组件加载为真实DOM节点。然而，真实DOM需要一个浏览器环境，为了解决这个问题，我们可以用到jsdom，也就是说我们可以用jsdom模拟一个浏览器环境去加载真实的DOM节点。首先，使用下面的命令安装jsdom模拟浏览器环境，安装命令如下：

npm install --save-dev jsdom复制代码

静态渲染render
render静态渲染，主要用于将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构。

shallow是最快的，这是因为shallow的局限性，只渲染第一层，不渲染所有子组件。事实证明，render的效率是mount的两倍。那么问题来了，mount存在的价值是什么？当然是有价值的，shallow和mount因为都是dom对象的缘故，所以都是可以模拟交互的。

常用函数

enzyme中有几个比较核心的函数需要注意，如下：

simulate(event, mock)：用来模拟事件触发，event为事件名称，mock为一个event object；
instance()：返回测试组件的实例；
find(selector)：根据选择器查找节点，selector可以是CSS中的选择器，也可以是组件的构造函数，以及组件的display name等；
at(index)：返回一个渲染过的对象；
get(index)：返回一个react node，要测试它，需要重新渲染；
contains(nodeOrNodes)：当前对象是否包含参数重点 node，参数类型为react对象或对象数组；
text()：返回当前组件的文本内容；
html()：返回当前组件的HTML代码形式；
props()：返回根组件的所有属性；
prop(key)：返回根组件的指定属性；
state()：返回根组件的状态；
setState(nextState)：设置根组件的状态；
setProps(nextProps)：设置根组件的属性；

开发过程中遇到的问题：

1、TypeError: environment.setup is not a function

FAIL __test__/app.test.tsx
  ● Test suite failed to run

    TypeError: environment.setup is not a function

      at node_modules/jest-runner/build/run_test.js:112:23

解决方案：
报这种错误可能有些许多原因，我的项目是由于我们对React-native 0.52版本做了深度改造，造成最新的Jest 24版本不兼容，降级的Jest23版本正常运行

参考方案：
https://stackoverflow.com/questions/48149004/typeerror-environment-setup-is-not-a-function-in-react-testing

https://stackoverflow.com/questions/48042896/why-will-jest-not-run-typeerror-environment-setup-is-not-a-function

总结：

参考文档

jest
How to set up Jest and Enzyme to test React Native apps
https://www.freecodecamp.org/news/setting-up-jest-enzyme-for-testing-react-native-40393ca04145/
https://airbnb.io/enzyme/docs/guides/react-native.html

Jest+enzyme测试React-native项目