为Cypress设置自定义默认导入路径

Question

我们使用Cypress测试带有Create React应用程序的应用程序构建，我们的CRA应用程序在.env–NODE_PATH=src/中设置了自定义导入路径，这样我们就可以"绝对"导入文件，例如import Foo from 'components/Foo'与import Foo from '../../components/Foo'

问题是，如果我们将CRA中的一个文件导入Cypress测试，而导入的文件包含类似import routes from 'lib/routes'的内容，Cypress不知道如何处理该路径，导入失败。

示例

假设我们有以下文件：

/cryps/integration/test.js

import routes from '../../src/lib/routes';
// Tests here…

/src/lib/routes.js

import { routeHelpers } from 'lib/routes';
// Routing code here

在这种情况下，当/cypress/integration/test.js导入/src/lib/routes.js时，它将遇到'lib/routes'的绝对导入，并且不知道如何解析该路径。

当以这种方式搜索导入时，有没有办法为Cypress设置要包含的自定义路径？在这个任意示例的情况下，这意味着告诉Cypress使用src作为解析导入的目录。

Answer 1

最简单的解决方案是简单地使用NODE_PATH=src运行柏树命令。因此，我的package.json被简单地更新为以下内容：

"scripts": {
"cypress:open": "NODE_PATH=src cypress open",
"cypress:run": "NODE_PATH=src cypress run",
},

Answer 2

我遇到了类似的问题，我使用.env和NODE_PATH=src

解决方案：我删除了.env并创建了用于绝对导入的jsconfig.json。

{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

这是CRA文件中建议的方法：https://create-react-app.dev/docs/importing-a-component/#absolute-进口