Behavior Driven Development in ReactJS

如果想跳过前文,可以直接定位到实战篇

What is Test Driven Development?

Coding of features and tests go hand in hand.

  1. Write a unit test.
  2. Run the test. See it fail.
  3. Write the feature code to pass the test.
  4. Refactor the code.

Why TDD?

  • It reduces errors and defects in the long run.
  • It leads to higher quality code.

What is Behavior Driven Development?

  • A variation of TDD that tests for user scenarios.
  • Given, when, then… [ pattern ]
  • Given notes, when deleting, then remove a note.
  • BDD consists of scenarios/specifications.

Test Tools

  • Jest
  • Enzyme

如果想看create-react-app或jest/enzyme环境的配置,可以定位到setup内容

我的实战

项目中Jest and Enzyme的实战。

1. 第一个Unit Test: toMatchSnapshot

快照是Jest把调用时的component的结构记录下来,下次可以用来对比结构有没有差异。

如果不一样,Jest会报错,如果是预期内的展示,可以按u把当前快照更新为最新的snapshot。

1
2
3
it('render correctly', () => {
expect(app).toMatchSnapshot();
});

2. 测试component的state

state的初始化检测 —— 状态gifts的值为空数组。

1
2
3
it('init `state` for gifts as an empty list', () => {
expect(app.state().gifts).toEqual([]);
});

注意:在jest中获得state是一个state()函数。

3. 点击交互的测试

通过className去查找交互元素,模拟用户行为,其中simulate是Enzyme提供的模拟函数。

1
2
3
4
5
6
7
8
9
10
it('add a gift to `state` when click the `add` button', () => {
app.find('.btn-add').simulate('click');

expect(app.state().gifts.length).not.toBe(0);
});

// 检验某个component(Gift)是否存在
it('create a Gift component', () => {
expect(app.find(Gift).exists()).toBe(true);
});

4. 利用describe划分测试代码块

describe把测试分组。也可以使用describe定义一个场景,把相似的操作合并。

以下的两个测试都需要先触发一次add-gift按钮的点击,再验证相应的测试逻辑。

下面有两个hook,beforeEachafterEach,可以用来执行前置共同的action结束之后的reset逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
describe('when clicking the `add-gift` button', () => {
beforeEach(() => {
app.find('.btn-add').simulate('click');
});

afterEach(() => {
// reset state `gifts` to []
app.setState({
gifts: []
});
});

it('add a gift to `state`', () => {
// app.find('.btn-add').simulate('click');
expect(app.state().gifts.length).not.toBe(0);
});

it('display gifts on the rendered list', () => {
// app.find('.btn-add').simulate('click');

const stateListLength = app.state().gifts.length;
const listItemLength = app.find('.list-item').length;

expect(stateListLength).toEqual(listItemLength);
});
});

5. 父子组件交互测试

1)背景

在GiftGiver内,父组件<App />根据state中的gifts数组渲染子组件<Gift />,而子组件有一个删除按钮,点击后可以从父组件stategifts去掉命中当前GiftID的数据项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// App.js

// state
this.state.gifts = [{
id: xxx
}]

removeGift(id) {
// this.state.gifts.filter(gift => gift.id !== id)
}

// render
{ this.state.gifts.map(gift => (
<Gift gift={gift} removeGift={removeGift} />
))}

// Gift.js

// render
// const { gift, removeGift } = this.props;
<div>
<Button onClick={ gift => removeGift(gift.id) }>remove</Button>
</div>

2)设计思路

  1. removeGift挂在父组件(<App />)上,入参giftID
  2. gift的数据和removeGift作为props传给子组件(<Gift />
  3. 在子组件(<Gift />),有一个删除按钮,点击后调用父组件的callback函数,入参giftID

3)写test case的思路

I. 父组件的测试用例 App.test.js

涉及的核心逻辑或交互:负责从数据源this.state.gifts中干掉对应数据的函数removeGift

测试思路removeGift入参giftID后,检查会不会正确地从state中去掉该项数组(giftID === item.id)。

实现详情:

a)前置操作:模拟调用行为。

1
2
3
4
beforeEach(() => {
// call the `removeGift` function in App.js
app.instance().removeGift(firstGiftID);
});

b)断言逻辑:确定this.state.gifts中没有包含对应项

1
2
3
4
5
6
it('gift with ID ${firstGiftID} is not in the state `gift`', () => {
const { gifts } = app.state();
const targetGiftList = gifts.find(gift => gift.id === firstGiftID) || [];

expect(targetGiftList.length).toBe(0);
});
II. 子组件的测试用例 Gift.test.js

涉及的核心逻辑或交互

  • 点击一个删除按钮
  • 调用父组件传过来的callback函数,并传入id

测试思路

  • 在shallow时,模拟父元素传入对应的props
  • 模拟用户行为,点击删除按钮
  • 检查回调函数有没有被调用,以及传入的参数对不对

实现详情

1)在shallow时,模拟父元素传入对应的props。

1
2
3
4
5
6
7
8
9
const mockRemove = jest.fn(); // 在第3点说明
const giftID = 1;
const props = {
gift: {
id: giftID
},
removeGift: mockRemove
};
const gift = shallow(<Gift { ...props } />);

2)beforeEach里模拟删除按钮的点击

1
2
3
beforeEach(() => {
gift.find('.btn-delete').simulate('click');
});

3)检查回调函数有没有被调用,以及传入的参数对不对

从第1点可以看到,shallow渲染传入props时,回调函数把原本的removeGift函数替换成jest的mock。(const mockRemove = jest.fn();)

因为该方法提供了一个断言检测方法,我们可以通过这个方式,检查回调函数有没有被调用以及传入的参数是否符合预期,实际的测试语句如下。

1
2
3
it('calls the removeGift callback', () => {
expect(mockRemove).toHaveBeenCalledWith(giftID);
});

6. coverage testing

检测实际被调用代码的覆盖程度。(冗余代码检测)

1
npm run test -- --coverage

指定--coverage目标文件:,在package.json下,添加以下语句:

1
2
3
4
5
6
"jest": {
"collectCoverageFrom": [
"src/**.js",
"!src/index.js"
]
}

Tips

如果存在某些函数/逻辑没有覆盖到,可以考虑新增一个和component同级的helpers文件夹,在里面单独写那些跟组件基本功能无关的逻辑,如用于生成ID的ID生成函数,可以单拎出来放进helpers及进行相应的单元测试。

Setup

Preparation

  1. node, v8.x
  2. npm, v5.x
  3. create-react-app

Steps

I. create-react-app yourProjectName

II. install dependencies

  • dependencies: react-dom & react
  • devDependencies: enzyme & jest-cli

III. enzyme-adapter-react-16

In order to use the most current version of React > 16, we now need to install “enzyme adapters” to provide full compatibility with React.

1
npm i enzyme-adapter-react-16 --save-dev

Next, add a src/tempPolyfills.js file to create the global request animation frame function that React now depends on.

src/tempPolyfills.js should contain the following contents:

1
2
3
const requestAnimationFrame = global.requestAnimationFrame = callback => {
setTimeout(callback, 0);
}

export default requestAnimationFrame;
Finally, add a src/setupTests.js file to configure the enzmye adapter for our tests. The disableLifecyleMethods portion is needed to allow us to modify props through different tests.

src/setupTests.js should contain the following contents:

1
2
3
4
5
6
import requestAnimationFrame from './tempPolyfills';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter(), disableLifecycleMethods: true });
暂无数据