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

Question

我正在使用带有 Typescript 和 Enzyme 的 create-react-app 项目(我也尝试过 react-testing-library 并遇到了同样的问题)

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

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

无法从“index.tsx”中找到模块“src/components/Ping” 其中 index.tsx 是 App 组件。

应用程序测试.tsx

import { shallow } from 'enzyme'
import * as React from 'react'
import App from '..'
it('renders without crashing', () => {
    shallow(<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 与渲染函数一起使用时，也会发生此错误。

Answer 1

如果您在 tsconfig.json 中设置了 paths 配置，TypeScript 就可以理解 src/components/Ping 的导入> 用于解析类型检查，但它不允许允许 Create React App 中的 Webpack bundler 解析路径。 TypeScript 实际上不会重写导入。

如果您使用的是 Create React App 1.x(react-scripts-ts 版本)，那么您将无法在不弹出和手动的情况下使用 paths修改 Webpack 配置。有一个名为 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"