jest單元測試實踐總結及react單元測試

jest 是facebook推出的一款測試框架，集成了 Mocha，chai，jsdom，sinon等功能。

基本用法

和 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的語法。可以這麼寫

import React from 'react'
import { shallow } from 'enzyme'
import CommentItem from './commentItem'

describe('測試評論列表項組件', () => {
  // 這是mocha的玩法，jest可以直接兼容
  it('測試評論內容小於等於200時不出現展開收起按鈕', () => {
    const propsData = {
      name: 'hj',
      content: '測試標題'
    }
    const item = shallow(<CommentItem {...propsData} />);
    // 這裏的斷言實際上和chai的expect是很像的
    expect(item.find('.btn-expand').length).toBe(0);
  })

  // 這是jest的玩法，推薦用這種
  test('兩數相加結果爲兩個數字的和', () => {
    expect(3).toBe(3);
  });
}

jest安裝

npm install jest -g

全局安裝過後，可以使用jest命令

生成配置文件：

jest --init

執行過程中會詢問一些問題，根據項目實際需要選擇，之後生成jest.config.js文件

引入babel-jest

npm install  babel-jest @babel/core @babel/preset-env --dev

jest命令執行時會自動查詢babel-jest模塊

jest --coverage生成覆蓋率報告

jest測試實例

export function isPromise(obj){
  return !!obj && (typeof obj === 'function' || typeof obj === 'object') && typeof obj.then === 'function'
}

import { isPromise } from '../../src/utils/isPromise'

describe("isPromise",() => {
  it('test Promise isPromise',() => {
    const test_promise = new Promise((resolve,reject) => {});
    expect(isPromise(test_promise)).toBe(true)
  })

  it('test object isPromise',() => {
    const not_promise = {
      then:function(){}
    }
    expect(isPromise(not_promise)).toBe(true)
  })
})

高級用法：

describe塊之中，提供測試用例的四個函數：before()、after()、beforeEach()和afterEach()。它們會在指定時間執行(如果不需要可以不寫)

describe('加法函數測試', () => {

  before(() => {// 在本區塊的所有測試用例之前執行
  });

  after(() => {// 在本區塊的所有測試用例之後執行
  });

  beforeEach(() => {// 在本區塊的每個測試用例之前執行
  });

  afterEach(() => {// 在本區塊的每個測試用例之後執行
  });


  it('1加1應該等於2', () => {
     expect(add(1, 1)).toBe(2);
  });
  it('2加2應該等於4', () => {
      expect(add(2, 2)).toBe(42);
  });

});

react單元測試

react提供了兩個測試的庫，react-test-renderer和react-dom/test-utils

react-test-renderer

實例：

import React, { Component } from 'react'

export default class Button extends Component {
  onClick = () => {
    console.log('點擊事件')
  }
  render() {
    return (
      <button onClick = {this.onClick}>
        {this.props.text}
      </button>
    )
  }
}

import React from 'react'
import Button from '../../src/components/Button'
import ShallowRenderer from 'react-test-renderer/shallow'
import TestUtils from 'react-dom/test-utils'

test('Button render with text', () => {
  const text = "text";
  const renderer = new ShallowRenderer();
  renderer.render(<Button text = {text}/>);
  const button = renderer.getRenderOutput();
  expect(button.type).toBe('button');
  expect(button.props.children).toBe(text)
})

react-dom/test-utils

詳細文檔移步官網：https://reactjs.org/docs/test-utils.html#renderintodocument

使用之前請先將jest.config.js中的testEnvironment:設置爲"jsdom"

// The test environment that will be used for testing
  testEnvironment: "jsdom",

import React from 'react'
import Button from '../../src/components/Button'
import ShallowRenderer from 'react-test-renderer/shallow'
import TestUtils from 'react-dom/test-utils'


test('Button render with text', () => {
  const text = "text";
  const renderer = new ShallowRenderer();
  renderer.render(<Button text = {text}/>);
  const button = renderer.getRenderOutput();
  expect(button.type).toBe('button');
  expect(button.props.children).toBe(text)
})



it('Button onClick test', () => {
  const onClick = jest.fn();
  //這裏要設置 testEnvironment: "jsdom",否則會報錯
  const tree = TestUtils.renderIntoDocument(<Button onClick = {onClick()} text="測試"/>);
  const button = TestUtils.findRenderedDOMComponentWithTag(
    tree,
    'button'
  )
  //[ˈsɪmjuleɪt] 模擬
  TestUtils.Simulate.click('button');
  expect(onClick).toBeCalled()
})

第三方測試庫：enzyme

實例

/* eslint-env jest */
import { shallow } from 'enzyme';
import React from 'react';
import Page404 from '../components/Page404';

describe('Page404', () => {
  it('Page404 shows "404"', () => {
    const app = shallow(<Page404 />);
    expect(app.find('div').text()).toEqual('404');
  });
});

 

 

參考：http://loveky.github.io/2018/06/05/unit-testing-react-component-with-jest/

https://www.jianshu.com/p/eaaf07c1b88f

https://www.cnblogs.com/susu8/p/9512393.html