这是一个使用 Mocha、Chai 和 jsdom 助手对 React 组件进行单元测试的简单示例，它用于代替 Karma 等测试运行器。
您将需要以下依赖项：
"dependencies": {
"react": "^15.1.0",
"react-dom": "^15.1.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"jsdom": "^9.3.0",
"mocha": "^2.5.3"
}
拥有一个指向 mocha 的 npm 脚本也很有用 - npm run test 将执行您的测试：
"scripts": {
"test": "./node_modules/.bin/mocha"
},
设置好依赖项后，您需要一个如下所示的目录结构：
.
├── /src
│ └── component-to-test.js
├── /test
│ ├── /unit
│ │ └── component-to-test.spec.js
│ ├── /util
│ │ └── jsdom.js
│ └── mocha.opts
├── .babelrc
└── package.json
我们将从您的 .babelrc 文件开始。您需要Babel 将您的 JSX 转换为 JavaScript。如果你想使用 ES6 语法（强烈推荐），Babel 也会提供帮助。我已经在 devDependencies 中包含了这两个预设。
.babelrc:
{
"presets": ["es2015", "react"]
}
接下来，我们将看看 jsdom 助手。这是为了将 React 组件渲染到内存中的 DOM 中，这通常由 Karma 等测试运行程序处理。
jsdom.js：
(function () {
'use strict';
var jsdom = require('jsdom'),
baseHTML,
window;
if (!global.window) {
baseHTML = '<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Tests</title></head><body></body></html>';
window = jsdom.jsdom(baseHTML).defaultView;
global.window = window;
global.document = window.document;
global.navigator = window.navigator;
}
}());
为了在我们的 mocha 测试中使用这个 jsdom 助手，我们需要设置一个 mocha.opts 文件来指定一些配置选项。我们将添加一个编译器，它会告诉 Babel 预处理测试，我们将 require jsdom 助手，以便 React 有一个 DOM 用于渲染组件。
mocha.opts：
--compilers js:babel-register
--recursive
--reporter spec
--ui bdd
--require ./test/util/jsdom.js
最后，我们可以开始测试 React 组件了。例如，这里有一个我们可以测试的简单组件。
test-component.js：
import React from 'react';
export default class TestComponent extends React.Component {
render() {
return (
<div className="test-component">Here is a test component</div>
);
}
}
这里有一个测试套件，可以测试这个组件的标记。
test-component.spec.js：
import TestComponent from '../../src/test-component';
import {expect} from 'chai';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from '../../node_modules/react/lib/ReactTestUtils';
describe('Test Component', () => {
let renderedNode;
function renderComponent() {
const componentElement = React.createElement(TestComponent),
renderedElement = ReactTestUtils.renderIntoDocument(componentElement);
renderedNode = ReactDOM.findDOMNode(renderedElement);
}
beforeEach(() => {
renderComponent();
});
it('should exist with the correct markup', () => {
expect(renderedNode.tagName).to.equal('DIV');
expect(renderedNode.className).to.equal('test-component');
expect(renderedNode.textContent).to.equal('Here is a test component');
});
});
此时，命令npm run test 应该会导致一次通过测试。
就是这样！如果您正在寻找更高级的测试技术，您可以完全避免对 jsdom 助手的需求，并为您的测试使用浅层渲染。如果您想采用这种方法，我强烈推荐Enzyme。
如果您有任何问题，请告诉我！