如何使用开玩笑测试反应组件

>本文使用JEST（一个Facebook维护的测试框架）探讨了测试React组件和简单的JavaScript功能。 我们将从简单的JavaScript函数开始，然后再转移到特定于反应的功能。 开玩笑不仅仅是反应。对于任何JavaScript应用程序，它都足够多。但是，它的功能对于UI测试特别有用，使其非常适合React。

密钥点：

使用玩笑测试React组件和JavaScript函数。
• 开始，从简单的JavaScript函数开始学习开玩笑的基础知识。
安装开玩笑和babel以兼容。
使用开玩笑的手表模式进行有效的测试重新启动。
对于反应组件，考虑酶或反应测试库。>
• 使用开玩笑的嘲笑，间谍和并行测试。>
• 示例todo应用程序：
• >
>一个小型TODO应用程序（可在GitHub和Live Demo上找到）作为我们的测试主题。 它是使用ES2015，Webpack和Babel构建的。核心逻辑属于

>，其中包含管理应用程序状态的纯函数（

，，）。 这些功能类似于redux还原器。

>

app/state-functions.js测试驱动的开发（TDD）：>> toggleDone> TDD（代码之前的写作测试）具有优势，而该方法通常是个人喜好的问题。 对于React组件，首先编写组件，然后添加测试通常是实用的。 addTododeleteTodo介绍开玩笑：

与其他框架相比，Facebook大大改善的开玩笑提供了简化的设置。其并行的测试执行和观察模式可显着提高测试速度和效率。 它包括用于node.js中的类似浏览器测试的JSDON，并支持异步测试，模拟，间谍和存根。

>安装和配置：

安装必要的软件包：

>确保存在a文件（原始文章中提供的示例）。 Jest期望在

>目录中进行测试（或以

>或

结尾的文件）。

> 测试业务逻辑：

的简单测试演示了开玩笑的用法：>

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

>babel.config.js用于对象/数组比较，而__tests__则用于原始类型。 Jest's Watch Mode（.test.js或.spec.js）会自动重新运行文件更改。 原始文章也显示了类似的

>测试。

> 测试反应组件：

测试反应组件通常涉及比业务逻辑更少的全面测试。 酶（或React Teast库，根据React团队的建议）简化了此过程。安装酶和适当的适配器：

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

创建setup-tests.js配置酶：

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

在package.json中配置开玩笑> setup-tests.js：

>

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

显示了Todo组件渲染的测试，使用mount渲染和find来定位元素。 随后的测试使用jest.fn()来创建间谍函数，并simulate('click')触发事件，用toBeCalledWith>。

验证函数调用

结论：

开玩笑的速度，观察模式和表达API使其成为一个强大的测试框架。 本文总结了其收益和进一步阅读建议的摘要，以及解决有关测试与开玩笑的反应组件的常见问题的常见问题。 FAQ覆盖

，React测试渲染器，用Props测试组件，并在组件中测试功能。render

以上是如何使用开玩笑测试反应组件的详细内容。更多信息请关注PHP中文网其他相关文章！