React常用测试框架之Mocha

我们之前讨论的Jest可以说是一个零配置、高度集成的测试框架，而Mocha则相对更加灵活，你可以根据你的需求自行决定安装哪些包来测试React。

创建一个新的文件夹，并初始化npm包：

npm init

然后安装所需要的依赖包：

npm install --save-dev mocha @babel/register @babel/core @babel/preset-env @babel/preset-react

创建.babelrc文件：

{
  "presets":["@babel/react","@babel/preset-env"]
}

安装完成后，在package.json文件中设置测试脚本：

"scripts": {
    "test": "mocha --require @babel/register test/button.spec.js"
 }

这句脚本的意思：告诉npm执行mocha测试任务，启用编译器标记设置让Babel记录器负责处理JavaScript文件。

安装React、ReactDOM和TestUtils：

npm install --save-dev react react-dom react-test-renderer

使用Mocha编写测试的基本依赖已经安装好了，但为了实现与Jest一样的功能，我们还需要安装三个包：

npm install --save-dev chai chai-spies jsdom

chai，它允许我们像Jest一样编写预测代码；chai-spies，提供了spies功能，可以检查onClick是否被调用过；jsdom，它可以创建独立的DOM，这样即使没有真实的浏览器环境，也可以在控制台中使用TestUtils。

现在开始编写测试了，这里直接使用前面写好的代码文件button.js。直接贴代码：

import React from 'react'

class Button extends React.Component{
  render(){
   return  (
    <button onClick={this.props.onClick}>
        {this.props.text}
    </button>
  )
 }
}
export default Button

Mocha约定，测试用例需要放在test文件夹下，所以，新建test文件夹，并创建button.spec.js文件。

在button.spec.js文件夹中导入所需依赖：

import React from 'react'
import TestUtils from 'react-dom/test-utils'
import ShallowRenderer from 'react-test-renderer/shallow'
import Button from '../button'
import chai, {expect} from 'chai'
import spies from 'chai-spies'
import { JSDOM } from 'jsdom'

因为Mocha是允许你自由配置的，所以我们都注意到了，导入项也就相应的多了。

所需依赖引入完毕，下一步，我们开始编辑测试用例：

const spy = chai.use(spies).spy
const {document}=(new JSDOM('')).window
global.document = document
global.window = document.defaultView

describe('Button', () => {
   it('renders with text', () => {
      const text = 'text'
      const renderer = new ShallowRenderer()
      renderer.render(<Button text={text} />)
      const button = renderer.getRenderOutput()

      expect(button.type).to.equal('button')
      expect(button.props.children).to.equal(text)
   })
    
  it('fires the onClick callback', () => {
      const onClick = spy()
      const tree = TestUtils.renderIntoDocument(
         <Button onClick={onClick} />
       )
       const button = TestUtils.findRenderedDOMComponentWithTag(
         tree,
         'button'
       )
       
      TestUtils.Simulate.click(button)
      expect(onClick).to.be.called()
   })
})

让chai使用spy，再从chai中引用我们需要的功能，设置jsdom，定义渲染React组件所需的DOM对象。基本的设置完成以后接下来就是测试用例的内容了，第一个函数describe，是负责封装相同模块的测试用例的；第二个函数it是写具体的测试代码的。这里我们没有使用toBe方法，而是链式调用了chai提供的to.equal方法，不过两者作用相同。

最后，我们来执行一遍：

npm test

测试执行结果

这表明我们的测试已经通过了，现在可以使用Mocha测试真正的组件啦！