如何使用打字稿对反应组件进行单元测试？答案

【问题标题】：How can i make unit test for react component with typescript?如何使用打字稿对反应组件进行单元测试？
【发布时间】：2020-01-20 17:20:31
【问题描述】：

我用 typescript 做了一个小的 react 项目

然后我将 li 标签的数字打印到浏览器。

所以我尝试实现测试组件创建 HTMLElement 的单元测试

但我真的很困惑。我是打字稿的新手

import * as React from "react";
import { render } from "@testing-library/react";
import List from "../component/List";

describe("<List />", () => {
  it("check li tags were made perfectly", async () => {
    const component = render(<List />);
    component.getByText("li");
  });

这段代码的输出是render(<List />);处的错误

我的组件不需要任何道具

我怎样才能使这段代码能够正常运行？

【问题讨论】：

render(<List />); 遇到的错误是什么？
假设您使用的是CRA，我的猜测是您的测试文件扩展名是ts。尝试将其更改为tsx 并再次运行。
错误是什么？
@EdwardChopuryan - 没错，这就是原因。谢谢！我不知道测试文件的扩展名必须是tsx

标签： reactjs typescript jestjs react-testing-library

【解决方案1】：

感谢@Edward Choupuryan

这只是一个简单的问题。

我想用打字稿测试反应组件，并且该文件需要具有扩展名 tsx 。我的只是*.test.ts

我将我的测试文件testfile.test.ts 更改为testfile.test.tsx，问题解决了

【讨论】：