Cypress 设置默认路径别名答案

【问题标题】：Cypress setup default path aliasesCypress 设置默认路径别名
【发布时间】：2019-07-09 15:44:01
【问题描述】：

我所有的 Imports 都使用 webpack/rollup 默认路径来导入我的 .js 文件位于 src/ 下。

我的项目是：

project-name/
    node_modules/
    cypress/
    src/
    ...

然后，当我在 Cypress 中运行测试时，导入依赖项不会出错。

我如何为 src

设置默认项目文件夹

谢谢！

【问题讨论】：

标签： reactjs webpack cypress rollup

【解决方案1】：

解决方案：

cypress/plugins/index.js

如果您使用的是 webpack，请将 webpack 配置添加到此文件中。

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


module.exports = (on) => {
  const options = {

      webpackOptions: require('../../build/webpack.config'),
      watchOptions: {},
  };

  on('file:preprocessor', webpack(options));
};

// send in the options from your webpack.config.js, so it works the same
// as your app's code

【讨论】：

只是想补充一点，如果有人在 Docker 上使用 Cypress（例如他们的官方镜像之一 github.com/cypress-io/cypress-docker-images），那么 webpack-preprocessor 可以作为 /root/.cache/Cypress/<your_cypress_version>/Cypress/resources/app/npm/webpack-preprocessor 路径下的全局模块使用。跨度>
使用webpack别名（webpack.js.org/configuration/resolve/#resolvealias）可以这样：js ;module.exports = (on, config) => { const preprocPath = `${config.env.CACHE_FOLDER}/${config.version}/Cypress/resources/app/npm/webpack-preprocessor`; const preproc = require(preprocPath); const options = { webpackOptions: { resolve: { alias: { 'alias-name': 'path/to/module' }, }, }, }; on('file:preprocessor', preproc(options)); };