在使用ParcelJS构建的Cypress测试中，如何在绝对路径中使用导入? [英] How to use import with absolute paths in Cypress tests built with ParcelJS?

问题描述

我在Parcel项目中使用了带有绝对路径的导入，但是赛普拉斯测试无法平等地解析这些绝对路径.

I'm using imports with absolute paths in my Parcel project but these absolute paths aren't equally resolved by Cypress tests.

宗地:从'/foo.js'导入{foo}:相对于项目根目录

Parcel: import {foo} from '/foo.js': relatively to project root

Cypress :从'/foo.js'导入{foo} :磁盘根目录上的绝对地址

Cypress: import {foo} from '/foo.js': absolute on disk root

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

When Parcel's entry point is in src folder importing /foo.js anywhere in the project looks for file in path <project>/src/foo.js. (Docs: https://parceljs.org/module_resolution.html#absolute-paths)

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

But Cypress doesn't have any entry point and if it tries to import a file using absolute path it considers / as a filesystem root. This can happen when imported file (foo.js) internally imports another file (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一样解析相对于某个入口点的绝对路径?

How can I make Cypress to resolve absolute paths relative to some entry point as Parcel does?

推荐答案

您可以自己编译spec文件，更改路径分辨率.

You can compile your spec files yourself, changing path resolution.

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

For that, you can use a Cypress' official browserify preprocessor, and adding paths browserify option, and also pathmodify browserify plugin that will take care of stripping the leading / in paths, so that the path resolution works correctly.

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

First, install the packages by:

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

Learn more at https://docs.cypress.io/api/plugins/preprocessors-api.html

这篇关于在使用ParcelJS构建的Cypress测试中，如何在绝对路径中使用导入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！