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

彼得·K。

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

模块分辨率差异

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

赛普拉斯::import {foo} from '/foo.js'在磁盘根目录上绝对

当Parcel的入口点位于src文件夹中时,导入/foo.js项目中的任何位置都会在path中查找文件<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一样解析相对于某个入口点的绝对路径?

住所

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

为此,您可以使用赛普拉斯的官方browserify预处理器,并添加browserifypaths 选项,还可以使用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上了解更多信息。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

对ClassLoader使用绝对路径getResourceAsStream()

如何在Java中获取文件的绝对路径

如何在Java中使用正确的字符编码获取绝对路径?

如何在Spring MVC中使用绝对路径加载图像?

使用绝对路径导入React组件

使用baseUrl导入模块时,如何使tsc解析绝对路径?

如何在Expo和React Native中使用绝对路径导入?

图片具有绝对路径-如何在LaravelMix中使用子目录URL

使用绝对路径而不是相对路径与JetBrains WebStorm自动导入进行反应

如何解决使用绝对路径导入?

在打字稿中使用绝对路径进行导入

无法使用绝对路径导入

如何使用绝对路径参考文件夹构建VSTS项目?

如何在不指定绝对路径的情况下使用文件脚本?

在Rails 6中使用绝对路径

如何使用pathlib在Python中获取两个绝对路径之间的相对路径?

如何在Create React App项目中避免很长的路径并使用绝对路径?

如何在PowerShell中基于相对路径或绝对路径获取绝对路径?

如何使用文件的绝对路径打开文件?

如何在Windows File Explorer中使用绝对路径

如何在bash提示中显示绝对路径?

如何在unix中使用expr从存储在变量中的文件的绝对路径名中提取父目录?

如何在WPF项目中使用具有绝对路径的Image?

如何在Java中获取绝对路径

bash中的命令无法使用绝对路径

如何在Windows中使用绝对路径形成FTP URL?

在绝对路径中使用通配符创建文件

使用React + Webpack时如何使用绝对路径导入自定义scss?

使用JavaScript在MVC中获取文件的绝对路径

TOP 榜单

热门标签

归档