使用 Enzyme 測試 react-redux-app(接上一篇)

時間 2019-11-08

標籤使用 enzyme 測試 react redux app 接上一篇欄目 React 简体版

原文原文鏈接

使用 Enzyme 測試 react-redux-app(接上一篇)

使用 enzyme+jest 能夠很方便的來測試咱們的 react 應用javascript

測試須要關注哪些方面

頁面的結構的測試（通常是去判斷 dom 結構對不對）
樣式的測試（這個比較複雜，可能須要咱們去截圖對比，簡單點的作法，就直接對比樣式代碼是否有變動，這個只對 inline-style 有效）
交互的測試（測試一些交互可否正常被觸發）

安裝依賴

yarn add -D enzyme enzyme-adapter-react-16 @types/enzyme @types/enzyme-adapter-react-16

設置啓動文件

按照 enzyme 文檔，測試前是須要作一些準備工做的，因此咱們在根目錄下添加test.setup.tshtml

// test.setup.ts
import { configure } from 'enzyme'
import * as Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

同時修改jest.config.js文件java

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  setupTestFrameworkScriptFile: '<rootDir>/test.setup.ts'
}

模擬瀏覽器環境

react 應用運行的時候是在瀏覽器環境，可是咱們測試的時候是在 node 環境，因此須要咱們模擬出瀏覽器環境才能正確的運行測試。以前的作法是在無頭瀏覽器中跑測試代碼，但如今咱們有一個更好的、更輕量的方法，就是使用jsdom。node

安裝 jsdom

yarn add -D jsdom @types/jsdom

# 順帶安裝一下requestAnimation的模擬,react須要
yarn add -D raf

修改`test.setup.ts`

import 'raf/polyfill'
import { configure } from 'enzyme'
import * as Adapter from 'enzyme-adapter-react-16'
import * as jsdom from 'jsdom'

const { window } = new jsdom.JSDOM('<!doctype html><html><body></body></html>')

global.window = window
global.document = window.document

configure({ adapter: new Adapter() })

編寫測試

測試簡單的組件

咱們先寫一個測試文件測一個簡單的組件test/BtnBack.test.tsreact

/**
 * 返回按鈕
 */
import * as React from 'react'
import { Button } from 'antd'
import { ButtonProps } from 'antd/lib/button'
import { win } from '../../util'

const BtnBack: React.SFC<ButtonProps> = props => (
  <Button onClick={win.goBack} {...props}>
    返回
  </Button>
)

export default BtnBack

import * as React from 'react'
import { shallow } from 'enzyme'
import BtnBack from '../../src/components/BtnBack'
import { Button } from 'antd'

test('<BtnBack />', () => {
  const wrapper = shallow(<BtnBack />)

  // 這部分是 結構測試
  const props = wrapper.find(Button).props()

  expect(props.children).toEqual('返回')

  // 這部分是 交互測試
  global.window = {
    history: {
      back: jest.fn()
    }
  }

  wrapper.find(Button).simulate('click')

  expect(global.window.history.back).toBeCalled()
})

done! 是否是很簡單。shell

測試 connected 組件

測試 connected 組件有兩種方法。redux

一種是使用dive方法，dive 能剝離第一層組件，返回 connected 組件裏第一個非 dom 的 child-node，也就是咱們本身寫的組件，而後就像測一個簡單組件同樣去測這個組件。固然，測試的時候須要模擬出 connected 產生的一些 props。
另外一種就是模擬出 redux-store，我用的是這種

安裝 mock-store

yarn add -D redux-mock-store @types/redux-mock-store

編寫測試

import * as React from 'react'
import Selector from '../../src/components/Selector'
import configureStore from 'redux-mock-store'
import { mount } from 'enzyme'
import { Select } from 'antd'

const middlewares = []
const mockStore = configureStore(middlewares)

const initState = {
  dataList: [
    {
      value: 1,
      desc: '1'
    },
    {
      value: 2,
      desc: '2'
    }
  ]
}

const store = mockStore(initState)

test('loadActin: Function, dataSouce: any', () => {
  let count = 0

  const loadAction = () => {
    count++
    return {
      type: 'TEST'
    }
  }

  const wrapper = mount(
    <Selector
      loadAction={loadAction}
      statePicker={state => state.dataList}
      store={store}
    >
      {(dataSource, Option) => {
        return dataSource.map((e: any, i: number) => (
          <Option key={i} value={e.value}>
            {e.desc}
          </Option>
        ))
      }}
    </Selector>
  )

  // action 被調用
  expect(count).toBe(1)

  // 渲染出正確的option 數量
  const opts = wrapper.find(Select).prop('children') as any[]
  expect(opts.length).toBe(2)
}

done! 是否是也很簡單。api