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

我们正在使用Cypress测试带有Create React app的应用程序构建，我们的CRA应用程序正在

.env

-

NODE\u path=src/

–中设置自定义导入路径，以便我们可以“绝对”导入文件，例如

从“组件/Foo”导入Foo

与

从“../components/Foo”导入Foo

问题是，如果我们将CRA中的一个文件导入Cypress测试，并且导入的文件包含类似于从“lib/routes”导入路由的

import routes

Cypress不知道如何处理该路径，导入失败

例子 假设我们有以下文件：

/cypress/integration/test.js

import routes from '../../src/lib/routes';

// Tests here…

import { routeHelpers } from 'lib/routes';

// Routing code here

/src/lib/routes.js

import routes from '../../src/lib/routes';

// Tests here…

import { routeHelpers } from 'lib/routes';

// Routing code here

在这种情况下，当

/cypress/integration/test.js

导入

/src/lib/routes.js

时，它将遇到

'lib/routes'

的绝对导入，并且不知道如何解析该路径

---

在以这种方式搜索导入时，是否有方法设置Cypress要包含的自定义路径？在这个任意示例中，这意味着告诉Cypress使用

src

作为目录来解析从中导入的内容。

最简单的解决方案是使用

NODE\u PATH=src

运行Cypress命令。因此，我的

package.json

仅更新为以下内容：

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

---

我有一个类似的问题，我正在使用

.env

和

NODE\u PATH=src

解决方案：我删除了

.env

并为绝对导入创建了

jsconfig.json

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

---

这是CRA文档中推荐的方法：

Cypress测试通常与应用程序分离，即测试实时DOM。不确定React，但在Vue和Angular webpack中，bundle导入，因此在运行时，您要么导入一个bundle，要么整个应用是一个bundle。您仍然可以在测试中使用

lib/routes

，例如提供fixture字符串，但您需要将文件复制到Cypress的fixture文件夹，或者调整从Cypress integration文件夹到源lib文件夹的相对路径。@eric99通过一个示例澄清了原始问题。问题是，当Cypress在其导入的文件中遇到任何绝对导入路径时，它不知道如何解决它们。复制到Cypress的fixture文件夹不会解决路径解析问题，也不会使用Cypress测试中的任何相对路径。如果与不完全相同，则与相关。