如何在使用 ParcelJS 构建的 Cypress 测试中使用绝对路径导入？

Question

我在 Parcel 项目中使用带有绝对路径的导入，但 Cypress 测试并不能同样解析这些绝对路径。

模块分辨率差异

包裹::import {foo} from '/foo.js'相对于项目根目录

Cypress ::import {foo} from '/foo.js'绝对在磁盘根目录上

当 Parcel 的入口点位于导入项目中任意位置src的文件夹中时，会在 path 中查找文件。（文档： https: //parceljs.org/module_resolution.html#absolute-paths）/foo.js<project>/src/foo.js

但是 Cypress 没有任何入口点，如果它尝试使用绝对路径导入文件，它会将其视为/文件系统 root。当导入的文件 ( foo.js ) 在内部导入另一个文件 ( bar.js ) 时，可能会发生这种情况。

赛普拉斯测试.js

import {foo} from '../../src/foo.js' // I don't care using relative paths in tests.
// tests here...

foo.js

import {bar} from '/bar.js' // Absolute path not found by Cypress
//...

如何让 Cypress 像 Parcel 那样解析相对于某个入口点的绝对路径？

Answer 1

您可以自己编译规范文件，更改路径分辨率。

为此，您可以使用 Cypress 的官方browserify 预处理器，并添加paths browserify 选项，以及pathmodify browserify 插件，该插件将负责剥离/路径中的前导，以便路径解析正常工作。

首先，通过以下方式安装软件包：

npm install -D @cypress/browserify-preprocessor pathmodify

然后在你的cypress/plugins/index.js：

npm install -D @cypress/browserify-preprocessor pathmodify