当测试组件呈现嵌套连接组件时，React 测试失败，找不到嵌套组件

Question

我正在使用带有 Typescript 和 Enzyme 的 create-react-app 项目（我也尝试过 react-testing-library 和运行进入同一问题）

我是 React 测试的新手，正在尝试让基本测试正常工作。在本例中，我尝试测试呈现 Ping 组件的 App 组件。此错误仅在尝试呈现连接的组件时发生，在尝试呈现无状态功能组件时不会发生。

当我尝试在我的 App 组件上进行简单的渲染测试时，出现错误：

Cannot find module 'src/components/Ping' from 'index.tsx' 其中 index.tsx 是 App 组件。

App.test.tsx

import { shallow } from 'enzyme'
import * as React from 'react'
import App from '..'
it('renders without crashing', () => {
    shallow(<App/>)
});

App.tsx

import * as React from 'react';
import Ping from "src/components/Ping";
import './App.css';

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Ping/>
      </div>
    );
  }
}

export default App;

当我尝试将 react-testing-library 与 render 函数一起使用时，也会发生此错误。

Answer 1

如果您在 tsconfig.json 中设置了 paths 配置，这将允许 TypeScript 理解 src/components/Ping 的导入以解决类型检查问题，但它 不允许 允许 Create React App 中的 Webpack 捆绑器解析路径。 TypeScript 实际上不会重写导入。

如果您使用的是 Create React App 1.x（react-scripts-ts 版本），那么如果不弹出并手动修改 Webpack 配置，您将无法使用 paths。有一个名为 tsconfig-paths-webpack-plugin 的 Webpack 插件可以让 Webpack 解析这些导入。您还需要配置 Jest 模块解析。

如果您使用的是 Create React App 2.x，您可以使用 @babel/preset-typescript 启用 TypeScript 支持，并且由于您使用的是 Babel，您还可以访问 babel-plugin-module-resolver，您可以在其中配置 Babel 以重写这些路径别名以匹配 TypeScript 的预期。作为一个额外的好处，这将同时配置 Jest 和 Webpack，因为它们都使用 Babel。

您也可以只使用相对导入：

import Ping from "../src/components/Ping"

当测试组件呈现嵌套连接组件时，React 测试失败，找不到嵌套组件

React tests fail when tested component renders a nested connected component, cannot find nested component

javascript

reactjs

typescript

enzyme

react-testing-library