我们之前讨论的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 (
)
}
}
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()
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(
)
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测试真正的组件啦！