React Native的單元測試Jest+Enzyme+storybook

demo

配置

Jest配置

Jest

1. 安裝

Jest在React Native利用react-native init AwesomeProject創建項目的時候就會默認安裝了，這里就不多介紹了。

在你使用 create-react-app 或 react-native init 創建你的 React 或 React Native 項目時，Jest 都已經被配置好并可以使用了。在 __tests__文件夾下放置你的測試用例，或者使用 .spec.js 或 .test.js 后綴給它們命名。不管你選哪一種方式，Jest 都能找到并且運行它們。

Enzyme配置

Enzyme

1. 安裝

yarn add enzyme enzyme-adapter-react-16 --dev

每個適配器可能還有其他的對等體依賴關系，您也需要安裝它們。舉例來說， enzyme-adapter-react-16對應用同版本的依賴react@16，react-dom@16和react-test-renderer@16。

2. 初始化配置

由于React Native有很多環境依賴性，如果沒有主機設備，很難模擬。所以還需要添加react-native-mock，如下

yarn add react-native-mock --dev

3. 初始化配置

做后需要配置enzyme的適配器，一個一般要根據react的版本配置，現在項目中用的是react@16，所以如下配置

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'react-native-mock/mock';

Enzyme.configure({ adapter: new Adapter() });

還需要讓此配置，在所以test之前執行，進行如下設置

// package.json
// ...
"jest": {
    // ...
    "setupFiles": [
      "<rootDir>/__tests__/Setup"
    ]
  }
// ...

Storybook配置

Storybook

1. 安裝

執行下面三條指令就能完成安裝

cd my-project-directory
npm i -g @storybook/cli
getstorybook

2. 運行

npm run storybook

運行

Jest 運行

1. 運行全部測試用例

   npm jest
   

2. 運行單個測試用例，可以借助webstorm工具，來運行，非常方便

   image

Storybook運行

1. 在開發組件的時候要把storybook運行起來，并寫stories

   npm run storybook
   

用例

Jest 常用api用法實例

API集合

全局方法

• afterAll(fn, timeout)
• afterEach(fn, timeout)
• beforeAll(fn, timeout)
• beforeEach(fn, timeout)
• describe(name, fn)
• describe.each(table)(name, fn)
• describe.only(name, fn)
• describe.only.each(table)(name, fn)
• describe.skip(name, fn)
• describe.skip.each(table)(name, fn)
• require.requireActual(moduleName)
• require.requireMock(moduleName)
• test(name, fn, timeout)
• test.each(table)(name, fn)
• test.only(name, fn, timeout)
• test.only.each(table)(name, fn)
• test.skip(name, fn)
• test.skip.each(table)(name, fn)

匹配器

• expect(value)
• expect.extend(matchers)
• expect.anything()
• expect.any(constructor)
• expect.arrayContaining(array)
• expect.assertions(number)
• expect.hasAssertions()
• expect.not.arrayContaining(array)
• expect.not.objectContaining(object)
• expect.not.stringContaining(string)
• expect.not.stringMatching(string | regexp)
• expect.objectContaining(object)
• expect.stringContaining(string)
• expect.stringMatching(string | regexp)
• expect.addSnapshotSerializer(serializer)
• .not
• .resolves
• .rejects
• .toBe(value)
• .toHaveBeenCalled()
• .toHaveBeenCalledTimes(number)
• .toHaveBeenCalledWith(arg1, arg2, ...)
• .toHaveBeenLastCalledWith(arg1, arg2, ...)
• .toHaveBeenNthCalledWith(nthCall, arg1, arg2, ....)
• .toHaveReturned()
• .toHaveReturnedTimes(number)
• .toHaveReturnedWith(value)
• .toHaveLastReturnedWith(value)
• .toHaveNthReturnedWith(nthCall, value)
• .toBeCloseTo(number, numDigits)
• .toBeDefined()
• .toBeFalsy()
• .toBeGreaterThan(number)
• .toBeGreaterThanOrEqual(number)
• .toBeLessThan(number)
• .toBeLessThanOrEqual(number)
• .toBeInstanceOf(Class)
• .toBeNull()
• .toBeTruthy()
• .toBeUndefined()
• .toContain(item)
• .toContainEqual(item)
• .toEqual(value)
• .toHaveLength(number)
• .toMatch(regexpOrString)
• .toMatchObject(object)
• .toHaveProperty(keyPath, value)
• .toMatchSnapshot(propertyMatchers, snapshotName)
• .toStrictEqual(value)
• .toThrow(error)
• .toThrowErrorMatchingSnapshot()

Enzyme 常用api用法實例

enzyme有3種渲染方式：render、mount、shallow，先了解下區別。

render、mount、shallow的區別

render采用的是第三方庫Cheerio的渲染，渲染結果是普通的html結構，對于snapshot使用render比較合適。

shallow和mount對組件的渲染結果不是html的dom樹，而是react樹，如果你chrome裝了react devtool插件，他的渲染結果就是react devtool tab下查看的組件結構，而render函數的結果是element tab下查看的結果。

這些只是渲染結果上的差別，更大的差別是shallow和mount的結果是個被封裝的ReactWrapper，可以進行多種操作，譬如find()、parents()、children()等選擇器進行元素查找；state()、props()進行數據查找，setState()、setprops()操作數據；simulate()模擬事件觸發。

shallow只渲染當前組件，只能能對當前組件做斷言；mount會渲染當前組件以及所有子組件，對所有子組件也可以做上述操作。一般交互測試都會關心到子組件，我使用的都是mount。但是mount耗時更長，內存啥的也都占用的更多，如果沒必要操作和斷言子組件，可以使用shallow。

交互測試

主要利用simulate()接口模擬事件，實際上simulate是通過觸發事件綁定函數，來模擬事件的觸發。觸發事件后，去判斷props上特定函數是否被調用，傳參是否正確；組件狀態是否發生預料之中的修改；某個dom節點是否存在是否符合期望。

官方api

• .find(selector) => ShallowWrapper

• .findWhere(predicate) => ShallowWrapper

• .filter(selector) => ShallowWrapper

• .filterWhere(predicate) => ShallowWrapper

• .hostNodes() => ShallowWrapper

• .contains(nodeOrNodes) => Boolean

• .containsMatchingElement(node) => Boolean

• .containsAllMatchingElements(nodes) => Boolean

• .containsAnyMatchingElements(nodes) => Boolean

• .equals(node) => Boolean

• .matchesElement(node) => Boolean

• .hasClass(className) => Boolean

• .is(selector) => Boolean

• .exists() => Boolean

• .isEmpty() => Boolean

• .isEmptyRender() => Boolean

• .not(selector) => ShallowWrapper

• .children() => ShallowWrapper

• .childAt(index) => ShallowWrapper

• .parents() => ShallowWrapper

• .parent() => ShallowWrapper

• .closest(selector) => ShallowWrapper

• .shallow([options\]) => ShallowWrapper

• .render() => CheerioWrapper

• .unmount() => ShallowWrapper

• .text() => String

• .html() => String

• .get(index) => ReactElement

• .getNode() => ReactElement

• .getNodes() => Array

• .at(index) => ShallowWrapper

• .first() => ShallowWrapper

• .last() => ShallowWrapper

• .state([key\]) => Any

• [.context([key\]) => Any](http://airbnb.io/enzyme/docs/api/ShallowWrapper/context.html

• .props() => Object

• .prop(key) => Any

• .key() => String

• .simulate(event[, data\]) => ShallowWrapper

• .setState(nextState) => ShallowWrapper

• .setProps(nextProps) => ShallowWrapper

• .setContext(context) => ShallowWrapper

• .instance() => ReactComponent

• .update() => ShallowWrapper

• .debug() => String

• .type() => String|Function

• .name() => String

• .forEach(fn) => ShallowWrapper

• .map(fn) => Array

• .reduce(fn[, initialValue\]) => Any

• .reduceRight(fn[, initialValue\]) => Any

• .slice([begin[, end\]]) => ShallowWrapper

• .tap(intercepter) => Self

• .some(selector) => Boolean

• .someWhere(predicate) => Boolean

• .every(selector) => Boolean

• .everyWhere(predicate) => Boolean

• .dive([options]) => ShallowWrapper

組件測試

1. 用storybook做組件測試，既可以存儲組件快照，也可以快速查看組件樣式

   例如：

   // 
   import React from 'react';
   import { storiesOf } from '@storybook/react-native';
   import { action } from '@storybook/addon-actions';
   import { linkTo } from '@storybook/addon-links';
   import * as img from './img';
   
   import ImageButton from './ImageButton';
   
   storiesOf('<ImageButton />', module)
     .add('normal', () =>
       <ImageButton
         title={'確認'}
         imageName={img.ICON_DENE}
         onPress={action('點擊')}
       />
     )
     .add('cancel', () =>
       <ImageButton
         title={'取消'}
         imageName={img.ICON_CANCEL}
         onPress={action('點擊')}
       />
     )
   ;
   

2. 效果圖如下

   
   
   image
   image
   image
   image

3. 根據組件的需要，進行一些函數的測試，如下

   // imageButton.test.js
   import 'react-native'
   import React from 'react';
   import { mount, shallow } from 'enzyme';
   import ImageButton from '../../src/components/ImageButton';
   
   test('<ImageButton/>', () => {
     let i = 0
     const onPress = () => I++
     const wrapper = shallow(<ImageButton title={'1'} imageName={null} onPress={onPress}/>);
     expect(wrapper.instance().props.title).toBe('1'); // uses the right handler
     expect(wrapper.prop('onPress')).toBe(onPress)
     expect(i).toBe(0);
     wrapper.simulate('press');
     expect(i).toBe(1);
   });
   

API測試

1. API測試主要進行，返回狀態碼（200、500、502等）的驗證，必要字段的返回，指定參數傳入指定數據返回等驗證，API測試可以在和后臺定義接口的時候就寫，等后臺接口寫好后直接跑一下測試用例就可驗證。

   describe('api', () => {
   // ...
     test('/api/config', () => {
       expect.assertions(1); // 異步斷言數量
       const param = Object.assign(defaultParam, {});
       const path = '/api/config';
       return api.post(path, param)
         .then(response => response.data)
         .then(response => {
           expect(response.errorCode).toBe(200);
         })
     });
   // ....
   
   });
   

參考文檔

Engine單元測試調研文檔