在React和TypeScript中使用Jest和RTL

在之前的文章中，我们已经配置了一个React和TypeScript的应用，使其被Webpack 5捆绑。我们的Webpack配置包括对CSS和图片的处理。

在这篇文章中，我们将安装并使用Jest和React测试库来为我们的应用程序中的几个组件编写测试。

安装Jest和React测试库

我们将首先安装Jest和它的TypeScript类型：

npm install --save-dev jest @types/jest

现在我们可以安装React测试库：

npm install --save-dev @testing-library/react

我们还将安装jest-dom ，它为我们提供了有用的匹配器，以便在DOM上使用：

npm install --save-dev @testing-library/jest-dom

让我们添加一个npm脚本，在package.json 中运行我们的Jest测试：

{
  "scripts": {
    ...,
    "test": "jest"
  }
}

配置Jest

我们可以在Jest设置文件中导入jest-dom ，这样我们就不必在每个测试文件中导入它。

首先，我们将在项目的根部创建一个Jest设置文件，名为jest-setup.ts 。我们将在其中添加以下导入语句：

import '@testing-library/jest-dom'

我们可以在package.json 的配置部分告诉Jest这个设置文件。在package.json 中添加以下jest 字段：

{
  ...,
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/jest-setup.ts"
    ]
  }
}

创建一个测试

让我们在一个名为Heading.test.tsx 的文件中为Header 组件创建一个测试：

import React from "react";
import { render, screen } from "@testing-library/react";
import { Heading } from "./Heading";

test("Header contains correct text", () => {
  render(<Heading />);
  const text = screen.getByText("My React and TypeScript App");
  expect(text).toBeInTheDocument();
});

该测试检查标题的内容是否正确。

如果我们运行npm test 来执行这个测试，我们会得到一个*"Unexpected token '.'"*错误。

问题是Webpack没有在Jest测试中执行，所以CSS模块还没有被解决。

嘲弄CSS模块

我们并没有测试Header 组件中CSS模块的具体样式，所以我们可以使用 moduleNameMapper和一个叫做identity-obj-proxy 的库来模拟。

让我们安装identity-obj-proxy ：

npm install --save-dev identity-obj-proxy

让我们在package.json 的Jest配置中添加以下内容：

{
  ...,
  "jest": {
    ...,
    "moduleNameMapper": {      "\\.(css|less)$": "identity-obj-proxy"    }  }
}

当Jest遇到{heading.heading} 的类名时，identity-obj-proxy 会用'header' 替换它，这样就把CSS模块模拟出来了。

如果我们重新运行测试，它就会通过：

嘲弄图像

让我们在一个名为Content.test.tsx 的文件中为Content 组件创建一个测试：

import React from "react";
import { render, screen } from "@testing-library/react";
import { Content } from "./Content";

test("Content contains var image", () => {
  render(<Content />);
  const car = screen.getByAltText("Car");
  expect(car).toBeInTheDocument();
});

如果我们重新运行我们的测试(npm test)，我们会得到一个*"无效或意外标记 "的*错误：

问题是Jest不理解图片的导入。

我们的测试只是检查图像元素是否包含在Content 组件中。因此，我们可以在Jest配置中使用moduleNameMapper ，模拟特定的汽车图片路径。在package.json 中添加以下内容：

{
  ...,
  "jest": {
    "moduleNameMapper": {
      ...,
      "\\.(jpg|jpeg|png|gif)$": "<rootDir>/src/__mocks__/fileMock.ts"    }
  }
}

让我们在我们的模拟文件中添加以下内容：src/__mocks__/fileMock.ts ：

export default "test-file-stub";

在我们的Jest测试中，我们React组件中的图像路径现在将被替换为 "test-file-stub"。

如果我们重新运行我们的测试(npm test)，它们现在将通过：

很好！😊

这就是了!我们的React和TypeScript项目现在有了一些通过的测试：

这段代码可以在GitHub上找到：github.com/carlrip/rea…