Question

我们正在使用赛普拉斯（Cypress）来测试使用Create React App创建的应用程序，我们的CRA应用程序正在.env – NODE_PATH=src/中设置自定义导入路径，以便我们可以“绝对”导入文件，例如import Foo from 'components/Foo'与import Foo from '../../components/Foo'

问题是，如果我们将CRA中的一个文件导入赛普拉斯测试中，并且导入的文件包含诸如import routes from 'lib/routes'之类的内容，赛普拉斯将不知道如何处理该路径，并且导入失败。 / p>

示例

假设我们有以下文件：

/cypress/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'的绝对导入，并且不知道如何解析该路径。

是否有一种方法可以设置赛普拉斯自定义路径，以便在以这种方式搜索导入时将其包括在内？在这个任意示例的情况下，这意味着要告诉赛普拉斯使用src作为解析导入来源的目录。

Answer 1

事实证明，最简单的解决方案是使用NODE_PATH=src运行cypress命令。因此，我的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-imports

为赛普拉斯设置自定义默认导入路径

示例

2 个答案: