与开玩笑的反应测试
#javascript #react #测试 #jest

用玩笑运行测试

有许多JavaScript测试框架。为了测试香草JavaScript应用程序，流行的选择是 Mocha 。 Jest是React开发人员的另一个流行选择。 Jest是由Facebook开发的，例如React，是一个开源项目。当您使用
生成React项目时，JEST会预装。 

create-react-app //command line tool.

如果您使用命令生成了一个React项目，那么您要运行测试必须执行的所有操作是使用命令

npm test

执行NPM测试时将发生几件事。

  1. 开玩笑是执行的：默认情况下，create-react-app应用程序使用开玩笑作为测试框架。

  2. 测试文件位于： Jest将自动搜索项目目录中的测试文件。它在SRC目录及其子目录中使用.test.js或.spec.js扩展程序搜索文件，这是一种通用约定，用于表明该文件包含相应的JavaScript文件的测试代码。

    < /li>

  3. 测试将执行： Jest将执行所有测试文件并运行这些文件中定义的测试用例。它将提供一个显示在控制台中的测试跑步者，显示哪个测试通行证和失败。它还将在测试执行过程中提供失败的断言或错误。

  4. 测试观看模式： jest运行手表模式默认情况下运行 npm test ，但它是可选的。观看模式意味着开玩笑将继续运行并观看更改测试文件或源代码的更改。当检测任何修改时，它会自动重新运行受影响的测试。

  5. 代码覆盖范围：默认情况下，创建React应用程序被配置为生成代码覆盖范围报告。执行NPM测试后，JEST还将收集有关测试涵盖多少代码的信息。它将生成一份覆盖范围报告，该报告可提供对经过测试和未测试的代码区域的见解。

NPM测试命令还将在项目目录中的package.json文件中执行测试脚本。 create-react-app 设置了默认配置，其中测试脚本与命令关联以使用Jest运行测试套件。此配置包括一个预定义命令，该命令与项目软件包文件中的测试脚本关联。测试脚本就像可以使用 npm test 的快捷方式或预定义命令。

。

package.json中的默认测试脚本 create react应用程序项目通常看起来像这样：

//json

"scripts": {
  "test": "react-scripts test"
}

此脚本依次运行与之关联的命令，该命令通常是 react-scripts test 。在幕后， npm测试通常会调用 react-scripts test 执行项目中定义的测试脚本。因此，NPM测试和React-Scripts测试均可互换用于在Create React App Project中运行测试。

示例是测试 

test("displays the text 'hello world'", () => {
  render(<Article />);

  expect(screen.queryByText("hello world")).toBeInTheDocument();
});

上面的测试示例正在执行以下操作：

  • 渲染：渲染方法用于在测试环境或虚拟DOM中渲染反应组件。由于开玩笑的测试不会在实际的浏览器中运行，而是在 jsdom 内部运行，它模仿了浏览器DOM的行为。 JSDOM允许Jest模拟节点中的环境之类的浏览器。该测试能够与DOM进行交互并操纵DOM。您还可以在测试脚本中使用与DOM相关的API，例如文档，窗口，QuerySelector 。默认情况下，Jest为每个测试文件设置JSDOM。

  • 期望：用于定义断言并在值之间进行比较的期望方法。您可以使用各种匹配器与期望方法检查是否满足某些条件。例如，在上面的代码中，我们使用的是自定义JSDOM匹配器 toBeintheDocument 检查该元素是否存在于DOM中。您可以使用此匹配器来验证当前文档中是否存在元素。

  • 屏幕：屏幕对象用于与渲染组件进行交互。它还提供了辅助方法，以查询DOM对我们期望渲染的元素。屏幕允许方便地访问元素，而无需直接依赖文档对象。在上面的示例中，screen.queryByText('hello world') line搜索虚拟dom的某些具有文本内容“ Hello World”的元素。如果找不到元素，它将返回null。

结论

总而言之，用 jest 进行反应测试提供了一种有效而有效的方法来确保应用程序的质量。通过JEST的全面测试框架并进行了反应测试实用程序，您可以轻松编写和执行测试以验证React组件的行为和功能。 - 快乐测试！