如何在使用 ParcelJS 构建的赛普拉斯测试中使用绝对路径导入？

Question

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

模块分辨率的差异

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

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

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

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

例子

cypress-test.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 preprocessor, and adding paths browserify option, and also pathmodify browserify 插件，该插件将负责去除路径中的前导 /，以便路径解析正常工作。

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

npm install -D @cypress/browserify-preprocessor pathmodify

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

const preprocessor = require('@cypress/browserify-preprocessor');
const pathmodify = require('pathmodify');

const browserifyOptions = preprocessor.defaultOptions.browserifyOptions;

// -----------------------------------------------------------------------------
// (1) resolve paths relative to project root
// -----------------------------------------------------------------------------

browserifyOptions.paths = [
  // the process.cwd() depends on the cypress process being started from
  //  the project root. You can also use an absolute path here.
  require('path').resolve( process.cwd() )
];

// -----------------------------------------------------------------------------
// (2) regard paths starting with `/` as project-relative paths
// -----------------------------------------------------------------------------

browserifyOptions.plugin = browserifyOptions.plugin || [];
browserifyOptions.plugin.unshift([
  pathmodify, { mods: [
    // strip leading `/` when resolving paths
    pathmodify.mod.re(/^\//, '')
  ]}
]);

// -----------------------------------------------------------------------------
// (3) compile spec files when they're run
// -----------------------------------------------------------------------------

const compileFile = preprocessor( preprocessor.defaultOptions );

module.exports = ( on ) => {
  on('file:preprocessor', file => {
    return compileFile( file );
  });
}

在 https://docs.cypress.io/api/plugins/preprocessors-api.html

了解更多

如何在使用 ParcelJS 构建的赛普拉斯测试中使用绝对路径导入？

How to use import with absolute paths in Cypress tests built with ParcelJS?

cypress

parceljs

模块分辨率的差异

例子