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

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

demo

配置

Jest配置

Jest

1. 安裝

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

在你使用 create-react-appreact-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@16react-dom@16react-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用法實例

中文 英文
匹配器 Matchers
測試異步代碼 Asynchronous
模擬器 Mock Functions
全局函數 Global Functions

API集合

全局方法
匹配器

Enzyme 常用api用法實例

enzyme有3種渲染方式:rendermountshallow,先了解下區別。

rendermountshallow的區別

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

組件測試

  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單元測試調研文檔

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容