Question

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

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

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

database.execSQL("ALTER TABLE content RENAME COLUMN archiveCount TO dismissCount") 其中index.tsx是应用程序组件。

App.test.tsx

Cannot find module 'src/components/Ping' from 'index.tsx'

App.tsx

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

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

Answer 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"

当被测组件渲染嵌套的连接组件时，React测试失败，找不到嵌套的组件

1 个答案: