2

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

我是 React 测试的新手，并试图让基本测试正常工作。在这种情况下，我正在尝试测试呈现 Ping 组件的 App 组件。此错误仅在尝试渲染连接组件时发生，在尝试渲染无状态功能组件时不会发生。

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

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

应用程序.test.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 与渲染功能一起使用时，也会发生此错误。

4

1 回答 1

1

如果您在 中设置了paths配置tsconfig.json，则允许 TypeScript 理解导入以src/components/Ping解决类型检查，但不允许Create React App 中的 Webpack 捆绑器解析路径。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"
于 2018-10-07T04:38:50.880 回答