如果使用与打字稿反应，我可以使用 tsx 扩展名来测试文件吗

Posted 2023-02-19

【中文标题】如果使用与打字稿反应，我可以使用 tsx 扩展名来测试文件吗

【英文标题】：can i use the tsx extension for test files if using react with typescript

【发布时间】：2019-10-01 00:58:29

【问题描述】：

我在 react redux 中有一个带有 typescript 的 react 应用程序。我正在使用 jest 来编写测试。根据惯例，我对测试文件的扩展名感到困惑。无论是 js/ts 还是 tsx。

任何线索将不胜感激。

【参考方案1】：

如果将 React 与 TypeScript 一起使用，我可以将 tsx 扩展名用于测试文件吗？

是的。如果将 React 与 TypeScript 一起使用，则可以对测试文件使用 *.tsx 扩展名。

任何线索将不胜感激。

有多种方法可以使用 TypeScript 设置 jest。例如，来自终端的try running this script：

npx create-react-app my-app --typescript
cd my-app
npm run eject

这将生成一个配置为使用 *.tsx 扩展名运行测试的项目。您可以在src/package.json 文件中查看其jest 配置，并在src/App.test.tsx 文件中查看示例测试。后者看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => 
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
);

【参考方案2】：

如果测试文件包含嵌入的类似 xml 的 JSX 代码，则应该使用 .test.tsx 扩展名（但不是因为您正在测试组件）。

根据Is there any downside to using .tsx instead of .ts all the times in typescript?

使用 .tsx 文件，您可以使用所有 JSX (javascript XML) 代码。 在 .ts 文件中，您只能使用 typescript。

如果您使用纯 Typescript 编写测试，.test.tsx 是错误的扩展名。

扩展名用于描述文件中的内容类型。 如果是用 typescript 写的测试文件，应该是 .test.ts，如果是用 javascript 写的，应该是 .test.js。

扩展名表示文件内容的特征或其 有可能的使用。 来自https://en.wikipedia.org/wiki/Filename_extension

如果您尝试将 .test.ts 扩展名用于包含 jsx/html 元素声明的测试文件，则可能会导致错误，如 "Navbar refers to a value, but is being used as a type here" when trying to render a shallow copy of my component when testing 中所述。对于此类文件，使用 .test.tsx 是合适的。

请注意，对于 JavaScript，.test.js 扩展适用于任何类型的测试，无论有无 Jsx 元素

【参考方案3】：

如果您正在测试 JSX（例如组件），您应该使用 .tsx 扩展名 如果你没有测试 JSX（例如 reducers），你应该使用 .ts

您还应该有一个 jest.config.js 文件，找到键“moduleFileExtensions”以查看 jest 接受的所有可用文件扩展名

【讨论】：

您应该为使用 typescript/JavaScript 编写的测试文件使用 .ts/.js 扩展名。要指定您正在测试的内容，您应该使用文件名的第一部分，例如myComponent.test.ts