如何使用 Mocha 对 React 组件进行单元测试
介绍
React 是软件行业中用于开发 Web 应用的最流行的库和广泛使用的 JavaScript 工具之一。在使用 React 构建大型可扩展应用程序时，开发过程必须采用有效的测试方法，例如测试驱动开发 (TDD)，这是一种编程实践，如果自动化测试失败，它会指示开发人员编写新代码。
JavaScript 和 React 应用程序有多种测试实用程序和框架。在本指南中，我们将探索使用 Mocha 和 Enzyme 进行测试。
React 中的测试类型
在深入研究测试细节之前，我们必须了解测试驱动方法中使用的基本术语。
单元测试：对单个组件进行单元测试，以便我们可以检查组件是否按照我们的预期呈现。
功能测试：在功能测试中，我们测试 React 组件的功能或行为。例如，单击<Button />组件时，路由必须改变，并且页面访问计数器必须增加。
集成测试：当所有组件都准备就绪时，集成测试才会完成。测试组件时，实际 DOM 和虚拟 DOM 必须相同。
React 中的单元测试
在本节中，我们将编写一个简单的组件，它将呈现“Hello World”标题并使用 Mocha 对其进行测试。
但首先，我们来快速看一下 Mocha 对自身的看法。
摩卡
Mocha 是一个功能丰富的 JavaScript 测试框架，可在Node.js和浏览器中运行，使异步测试变得简单而有趣。Mocha 测试以串行方式运行，允许灵活而准确地报告，同时将未捕获的异常映射到正确的测试用例。
在编写测试之前，让我们先安装 Mocha。
npm i mocha
Mocha 本身是不够的，因为它是一个测试框架，它期望我们放入我们选择的断言库，正如文档所述。
Chai是最广泛使用的断言库之一。因此，让我们在测试脚本中使用它。
npm i -D chai
您可能想知道测试框架和断言库之间有什么区别。答案是我们使用测试框架来组织和执行测试脚本，而断言库则对测试结果进行实际验证。
现在让我们开始构建我们的组件。
App.js
import React from "react";
const App = () => {
return <h1>Hello World</h1>;
};
export default App;
下一步非常重要，因为我们将为组件编写测试。
编写第一个测试
import React from "react";
import ReactDOM from "react-dom";
beforeEach(() => {
//
});
afterEach(() => {
//
});
describe("App Component Testing", () => {
it("Renders Hello World Title", () => {
//
});
});
beforeEach ()和afterEach()是脚本中每个测试用例之前和之后运行的测试钩子。因此，在beforeEach()钩子中，我们将创建一个<div>元素，我们将在其中安装我们的组件，而在afterEach()钩子中，我们将删除<div>元素。
let rootContainer;
beforeEach(() => {
rootContainer = document.createElement("div");
document.body.appendChild(rootContainer);
});
afterEach(() => {
document.body.removeChild(rootContainer);
rootContainer = null;
});
describe ()函数调用构造了我们的测试脚本并对各个测试用例进行分组。它可以包含许多it()函数调用，用于标识各个测试用例。
describe("App Component Testing", () => {
it("Renders Hello World Title", () => {
// test if the component is rendered and mounted
// assert that h1 contains Hello World
});
});
在添加断言之前，我们必须确保的第一件事是组件是否被渲染并且componentDidMount钩子是否被执行。
React 提供了一个名为act()的辅助函数，可确保与渲染、事件和异步操作等任务相关的更新已被处理并应用于 DOM。
import { act } from "react-dom/test-utils";
// ..
describe("App Component Testing", () => {
it("Renders Hello World Title", () => {
act(() => {
ReactDOM.render(<App />, rootContainer);
});
// assert that h1 contains Hello World
});
});
接下来，我们将评估<h1>元素是否包含文本“Hello World”
describe("App Component Testing", () => {
it("Renders Hello World Title", () => {
act(() => {
ReactDOM.render(<App />, rootContainer);
});
const h1 = rootContainer.querySelector("h1");
expect(h1.textContent).to.equal("Hello World");
});
});
运行测试
现在该进行测试了。
但在此之前，我们需要安装babel-register和一些 babel 插件作为开发依赖项，以便我们可以将测试中的 ES6 代码编译为 ES5。
npm i -D babel-register babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
在项目根目录中创建一个.babelrc文件并添加以下内容。
{
"presets": ["react", "es2015", "stage-0"]
}
要执行测试，我们需要运行以下命令：
./node_modules/.bin/mocha --require babel-register ./src/App.test.js
真倒霉！！
ReferenceError：文档未定义。但为什么呢？
好吧，document对象仅在浏览器中可用，并且我们在节点环境中运行测试。我们需要使用mocha-jsdom或任何其他 DOM 测试库模拟 DOM，以便在控制台中执行测试。
npm i -D mocha-jsdom
我们需要在测试代码之前声明全局文档对象。
const global.document = jsdom({
url: "http://localhost:3000"
})
现在让我们尝试重新运行测试。
成功了！
如果测试失败了怎么办？让我们将标题从“Hello World”改为“Hello Admin”，并检查测试结果。
您可以看到结果如何表明预期值。这在我们处理更复杂的应用程序时非常有用。
完整源代码
在本节中发布整个代码供您参考，以防您在后续操作中遇到困难。
App.js
import React from "react";
const App = () => {
return <h1>Hello World</h1>;
};
export default App;
应用程序.测试.js
import React from "react";
import ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";
import { expect } from "chai";
var jsdom = require("mocha-jsdom");
global.document = jsdom({
url: "http://localhost:3000/"
});
import App from "./App";
let rootContainer;
beforeEach(() => {
rootContainer = document.createElement("div");
<span class="hljs免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~