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

Question

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

模块分辨率的差异

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

柏树 :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 ，并添加 paths browserify option ，还有 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 了解更多信息