使用 react-scripts 测试单个文件

React 是目前最受欢迎的 JavaScript 库之一，用于构建 Web 应用程序和移动应用程序。React 提供了强大的功能和易于使用的 API。然而，为了确保 React 应用程序的质量和可靠性，测试是必不可少的一部分。React 应用程序可以通过 Jest 和 Enzyme 的帮助进行测试。

在本文中，我们将探讨如何使用 react-scripts 测试单个文件。react-scripts 是一个由 Create React App 提供的配置文件，它为我们提供了一个客户端应用程序的模板。这个模板包括一些默认的设置，如 Babel、Webpack 等，使我们可以快速启动一个新项目。在使用 react-scripts 时，我们可以轻松地运行我们的测试。

首先，我们需要安装依赖项。如果您已经使用 npm 初始化了您的项目，最简单的方法就是运行以下命令：

npm i -D jest babel-jest @testing-library/react @testing-library/jest-dom

这会将 Jest 的测试框架、Babel 用于将 ES6 语法转换为 ES5 语法的插件、@testing-library/react 库和 @testing-library/jest-dom 库作为依赖项安装到我们的项目中。

现在，我们可以在我们的项目根目录中创建一个名为 __tests__ 的文件夹。在这个文件夹中，我们可以创建一个名为 example.spec.js 的文件，用于测试我们的组件。

在 example.spec.js 文件中，我们可以导入我们要测试的组件和我们的测试库。

import React from 'react';
import { render } from '@testing-library/react';
import Example from '../components/Example';

接下来，我们可以编写我们的第一个测试。在这个测试中，我们将渲染我们的组件并断言其输出。

describe('Example Component', () => {
  it('Renders Example correctly', () => {
    const { getByText } = render(<Example title="Hello World" />);
    expect(getByText('Hello World')).toBeInTheDocument();
  });
});

在这里，我们使用 describe 定义一个测试套件，然后将一个名为 "Example Component" 的描述函数传递给它。接下来，我们使用 it 创建一个测试用例。在这个测试用例中，我们使用 render 函数将我们的 Example 组件渲染到测试 DOM 中，然后使用 getByText 查找内容为 "Hello World" 的文本节点。最后，我们使用 expect 断言文本节点是否在测试 DOM 中存在。

现在，我们已经编写了我们的测试用例。但是，我们如何运行我们的测试呢？

使用 react-scripts 运行测试非常简单。我们可以通过运行以下命令来启动测试：

npm test example.spec.js

这将启动 Jest 测试运行器，自动搜索 example.spec.js 文件进行测试。Jest 会默认启动一个 test runner 并运行我们的测试用例。

在测试运行结束后，我们可以在终端中看到测试的结果，以及每个测试用例的耗时和其状态。如果所有测试用例都通过，那么我们就准备好开始编写更多的测试用例了！

结论

在本文中，我们探讨了如何使用 react-scripts 测试单个文件。我们学习了如何安装依赖项，如何创建测试文件夹，如何编写测试用例，以及如何运行测试。现在，我们已经准备好开始编写更多测试用例了，以确保我们的 React 应用程序的质量和可靠性。

describe('Example Component', () => {
  it('Renders Example correctly', () => {
    const { getByText } = render(<Example title="Hello World" />);
    expect(getByText('Hello World')).toBeInTheDocument();
  });
});