Jest是一套完备的测试框架方案，由Facebook开发并开源，它致力于提供最佳的开发体验。为了更好地了解Jest，我们将通过实战方式来揭开它神秘的面纱！
首先，新建一个文件夹并进入，执行以下命令（文件夹命名建议使用英文）：
npm init
安装Jest：
npm install --save-dev jest
为了让npm识别到Jest测试命令，我们需要添加以下脚本在package.json文件中：
"script": {
"test": "jest"
}
我们是使用ES2015和JSX编写组件和测试的，所以需要安装Babel相关包，需要注意的是babel-jest不支持babel7，所以使用babel-core@^7.0.0-bridge.0插件作为babel6衔接到babel7的一个桥梁来解决这个问题：
npm install --save-dev babel-jest babel-core@^7.0.0-bridge.0 @babel/preset-env @babel/preset-react
创建.babelrc文件：
{
"presets": ["react","env"]
}
然后开始安装react和react-dom、react-test-renderer：
npm install --save react react-dom react-test-renderer
本文中我们是通过Node和控制台运行测试的，所以就不能用ReactDOM来进行组件渲染了。这里引入一个新的工具——TestUtils，由Facebook团队开发，可以用来浅渲染组件，或者将组件渲染到浏览器之外的独立DOM中。有了它，任何测试框架都可以轻松地测试React组件。
现在，我们开始创建组件进行测试。
组件名为Button，我们将采用TDD（测试驱动开发 test driven development）的形式，先编写结构代码，然后依据测试编写具体实现。
创建button.js文件：
import React from 'react'
class Button extends React.Component{
render(){
return <div />
}
}
export default Button
Jest会在源代码文件中查找以.spec、.test结尾的文件，或者位于__tests__folder文件夹下的文件；不过也可以自己进行配置。
我们先创建button.spec.js文件，并在其中编写第一条测试：
import React from 'react'
import TestUtils from 'react-dom/test-utils'
import Button from './button'
test('works', () => {
expect(true).toBe(true)
})
其中，test函数接受两个参数，第一个用于描述本条测试，第二个就是包含实际测试代码函数。另外，可以用expect函数对某个对象进行预测，它还可以链式调用其他方法，如toBe，以检查传给expect的对象和传给toBe的对象是否相同。
运行测试命令行：
npm test
你应该可以看到以下结果：
输出结果
控制台给出的是PASS，说明我们可以编写真正的测试了。
接下来我们想要测试的是，传入一些props时组件能够正确渲染，并且事件处理器可以按照预期工作。
测试react组件的方式一般有两种：
- 浅渲染
- 将组件挂载到独立的DOM中
第一种方式比较简单，也较好理解，我们先介绍它。浅渲染允许你按一级深度渲染组件，然后根据它返回的结果进行一些预测。渲染一级深度是指将组件隔离出来测试，即使其中包含一些很复杂的子组件，它们也不会被渲染，就算它们发生变化或者加载失败，也不影响测试结果。
在前面代码的基础上进行编写，添加测试代码块：
import ShallowRenderer from 'react-test-renderer/shallow'
test('renders 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)
})
先创建renderer变量，然后传入文本来渲染button组件，最后拿到渲染结果赋给button变量。上述代码表示我们想要测试给定的文本是否被渲染为button的子元素
执行npm test我们看到以下内容：
输出结果
测试没有通过，这和预期一样，因为此时组件还没有实现，它只是返回一个div元素，接下来我们对button.js文件按照测试要求进行修改：
render(){
return (
<button>
{this.props.text}
</button>
)
}
再次运行npm test，就会看到测试通过：
输出结果
我们采用浅渲染的方式成功地通过了第一条组件测试。那么我们想要测试浏览器事件该怎么做呢？
想测试浏览器事件就需要在浏览器环境中，将组件渲染到独立的DOM中，不过Jest提供了一个特殊的DOM结构，我们可以使用控制台将组件渲染进去。
在button.spec.js文件中新增代码块：
test('fires the onClick callback', () => {
const onClick = jest.fn()
const tree = TestUtils.renderIntoDocument(
<Button onClick={onClick} />
)
const button = TestUtils.findRenderedDOMComponentWithTag(
tree,
'button'
)
TestUtils.Simulate.click(button)
expect(onClick).toBeCalled()
})
这条测试的目的是，检查onClick是否正常工作，所以这里用jest函数创建onClick mock函数，然后将组件渲染进DOM，用TestUtils中的函数来查找按钮元素，最后使用Simulate来模拟事件。
测试代码写好以后，开始修改组件代码：
render(){
return (
<button onClick={this.props.onClick}>
{this.props.text}
</button>
)
}
执行npm test:
1509E1E7-5D4D-4E86-B11E-A3D49E42A77C.png
祝贺你！你已经成功使用Jest完成了测试。
网友评论