背景
在平时开发过程中，可能大部分开发同学是忽略对react组件进行一些自动化测试工作的，更多可能是以实现功能为目标，测试就交给测试同学。如果能做一些单元测试，短期看可能会增加工作量，长期来看，实际上能够避免一些低级错误，提高开发效率，降低故障率。本文基于create-react-app搭建前端项目，使用Jest 和 @testing-library/react进行组件测试。
最简单的react组件测试方式就是做快照测试，能够独立的测试每一个组件，有点类似于单元测试中对classes进行测试。
准备前端项目
我们通过create-react-app创建一个前端测试项目
npx create-react-app react-components-test
耐心等待项目创建完成。项目创建完成后，我们通过cd react-components-test指令进入到项目目录下，我们可以看到已经有一个测试的js——App.test.js：
项目目录内容
之后执行npm test，就可以看到一个测试结果：
测试结果
在这个结果中，我们可以看到测试文件几个，然后测试用例通过数量是多少，测试花费的时间等等信息。
难度上升了
接下来，我们做一些有实际用处的测试工作。我们先简单创建一个小的前端应用，添加一些方法功能，让测试显的更真实一点。
首先，让我们添加一个Button组件，这个组件的功能就是点击之后，就会加上button上设置的数值。这个组件有两个传参increment（设置+多少数值）和onClickFunction（点击事件）
// Button.js
import React from 'react'
const Button = ({ increment, onClickFunction }) => {
const handleClick = () => {
onClickFunction(increment)
}
return <button onClick={handleClick}>+{increment}</button>
}
export default Button
修改App.js
import React, { useState } from 'react'
import Button from './Button'
const App = () => {
const [count, setCount] = useState(0)
const incrementCount = increment => {
setCount(count + increment)
}
return (
<div>
<div>learn react</div>
<Button increment={1} onClickFunction={incrementCount} />
<Button increment={10} onClickFunction={incrementCount} />
<Button increment={100} onClickFunction={incrementCount} />
<Button increment={1000} onClickFunction={incrementCount} />
<span>{count}</span>
</div>
)
}
export default App
接下来，我们将用 @testing-library/react帮助我们测试按钮点击后的结果是不是正常。
首先让我们测试Button组件。在Button组件中创建一个Button.test.js文件。
//Button.test.js
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import Button from './Button'
我们从react-testing-library引入render和fireEvent工具方法，render能够帮助我们渲染JSX，fireEvent能让我们在组件上触发一个事件。
由于Button组件通过接收一个方法绑定到click事件上，我们添加一个count变量，同时创建一个增加它的方法
//Button.test.js
let count
const incrementCount = increment => {
count += increment
}
现在，我们开始写一个测试用例。首先我们初始化一个count值为0，然后在我们Button组件上increment传值为1，onClickFunction传我们定义的方法incrementCount，紧接着我们去获取组件第一个子元素的值，检查它是不是显示+1。
我们通过代码去触发点击事件，查看count值是不是从0变成了1。
//Button.test.js
test('+1 Button works', () => {
count = 0
const { container } = render(
<Button increment={1} onClickFunction={incrementCount} />
)
const button = container.firstChild
expect(button.textContent).toBe('+1')
expect(count).toBe(0)
fireEvent.click(button)
expect(count).toBe(1)
})
同样的，我们试试+100的按钮点击之后是不是也功能正常：
//Button.test.js
test('+100 Button works', () => {
count = 0
const { container } = render(
<Button increment={100} onClickFunction={incrementCount} />
)
const button = container.firstChild
expect(button.textContent).toBe('+100')
expect(count).toBe(0)
fireEvent.click(button)
expect(count).toBe(100)
})
然后，我们试试去测试App组件功能是不是正常。在页面上，我们显示了4个按钮组件，我们可以测试每个按钮在点击事件之后，是不是加上了对应的数值，我们可以尽可能多的测试几次。
// App.test.js
import React from 'react'
import {render, screen, fireEvent} from '@testing-library/react'
import App from './App'
test('renders learn react link', () => {
render(<App />)
const linkElement = screen.getByText(/learn react/i)
expect(linkElement).toBeInTheDocument()
})
test('App works', () => {
const {container} = render(<App />)
// console.log(container)
const buttons = container.querySelectorAll('button')
expect(buttons[0].textContent).toBe('+1')
expect(buttons[1].textContent).toBe('+10')
expect(buttons[2].textContent).toBe('+100')
expect(buttons[3].textContent).toBe('+1000')
const result = container.querySelector('span')
expect(result.textContent).toBe('0')
fireEvent.click(buttons[0])
expect(result.textContent).toBe('1')
fireEvent.click(buttons[1])
expect(result.textContent).toBe('11')
fireEvent.click(buttons[2])
expect(result.textContent).toBe('111')
fireEvent.click(buttons[3])
expect(result.textContent).toBe('1111')
fireEvent.click(buttons[2])
expect(result.textContent).toBe('1211')
fireEvent.click(buttons[1])
expect(result.textContent).toBe('1221')
fireEvent.click(buttons[0])
expect(result.textContent).toBe('1222')
})
我们就可以看到下面的测试结果：
完整测试结果
结语
好了，到此为止，react组件测试流程就完整的跑过了一遍。在真实的开发场景中，功能和逻辑会更复杂，本篇文章的目的在于抛砖引玉，如果对自动化测试感兴趣的同学，可以参考jest和@testing-library/react官方文档，在自己的项目中应用上去。
网友评论