前言
作為一個專案而言，單元測試應該是必備的一部分，也是最容易被大家忽略的一部分，這篇文章就介紹一下jest 和 enzyme。
Jest 特點：
- 測試用例並行執行，更高效
- 強大的 Mock 功能
- 內建的程式碼覆蓋率檢查，不需要在引入額外的工具
- 整合 JSDOM，可以直接進行 DOM 相關的測試
- 更易用簡單，幾乎不需要額外配置
- 可以直接對 ES Module Import 的程式碼測試
- 有快照測試功能，可對 React 等框架進行 UI 測試
開發
- 安裝jest
npm install jest babel-jest enzyme enzyme-adapter-react-16
複製程式碼我們先寫個列子試一下，在tests資料夾下建立demo.js和 demo.test.js
// demo.js
function sum(a, b){
return a + b;
}
module.exports = sum;
複製程式碼// demo.test.js
const sum = require('./sum.js')
test('test 1 plus 2 result', () => {
expect(sum(1 , 2)).toBe(3);
})
test('test 2 plus 2 should equal 4', () => {
expect(sum(2 , 2)).toBe(4);
})
複製程式碼在package.json的 script 中加入
"test": "jest"
複製程式碼我們執行npm run test看下效果
- 讓我們寫個簡單的UI測試
在routes中建立Demo2.jsx
import React from 'react';
export default class CheckboxWithLabel extends React.Component {
constructor(props) {
super(props);
this.state = { isChecked: false };
this.onChange = this.onChange.bind(this);
}
onChange() {
this.setState({ isChecked: !this.state.isChecked });
}
render() {
return (
<label>
<input
type="checkbox"
checked={this.state.isChecked}
onChange={this.onChange}
/>
{this.state.isChecked ? this.props.labelOn : this.props.labelOff}
</label>
);
}
}
複製程式碼在tests中建立`demo2.test.js
import React from 'react'
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme'
import Demo from '../src/routes/Test.jsx'
configure({ adapter: new Adapter() });
test('CheckboxWithLabel changes the text after click', () => {
const checkbox = shallow(<Demo labelOn="On" labelOff="Off" />);
expect(checkbox.text()).toEqual('Off');
checkbox.find('input').simulate('change');
expect(checkbox.text()).toEqual('On');
});
複製程式碼我們執行npm run test 來看下效果
PS F:\mytest\react-architecture> npm run test
> react-architecture@1.0.0 test F:\mytest\react-architecture
> jest
PASS tests/demo.test.js
PASS tests/demo2.test.js
Test Suites: 2 passed, 2 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.402s
Ran all test suites.
複製程式碼好，我們吧demo2.test.js 的 expect(checkbox.text()).toEqual('Off'); 和expect(checkbox.text()).toEqual('On'); 換下位置，會出現什麼呢？
PS F:\mytest\react-architecture> npm run test
> react-architecture@1.0.0 test F:\mytest\react-architecture
> jest
FAIL tests/demo2.test.js
● checkbox change
expect(received).toEqual(expected)
Expected value to equal:
"On"
Received:
"Off"
8 | test('checkbox change', () => {
9 | const checkbox = shallow(<Demo labelOn="On" labelOff="Off" />);
> 10 | expect(checkbox.text()).toEqual('On');
| ^
11 |
12 | checkbox.find('input').simulate('change');
13 |
at Object.<anonymous> (tests/demo1.test.js:10:29)
PASS tests/demo.test.js
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 2 passed, 3 total
Snapshots: 0 total
Time: 2.325s
Ran all test suites.
複製程式碼總結
這篇文章我們介紹了在專案中加入單元測試, 簡單寫了一些測試例子。