赛普拉斯无法识别我从外部 /cypress 目录导入的模块

Question

我正在尝试将模块从我的 /cypress 目录外的文件导入到 /cypress/integration 目录的 test.spec.js 文件中，如下所示：

import { LAB_MODEL } from '../../models/search/lab-model';

但是在这个导入的模块“LAB_MODEL”中，还有其他文件正在导入，在文件导入的开头使用“@@”，例如

import ExperimentDetails from "@@/components/experiment/ExperimentDetails";

我认为这就是 Cypress 无法正常工作并给我这个错误的原因：

Error: Webpack Compilation Error
./models/search/lab-model.js
Module not found: Error: Can't resolve '@@/components/experiment/ExperimentDetails' in '/Users/hidden/models/search'
resolve '@@/components/experiment/ExperimentDetails' in '/Users/hidden/models/search'
  Parsed request is a module
  using description file: /Users/hidden/package.json (relative path: ./models/search)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

所以我认为这就是我的测试不会运行的原因，但我不知道如何让 Cypress 识别“@@”导入并且找不到任何 documentation/Whosebug答案，任何帮助表示赞赏，谢谢！

Answer 1

@@/ 看起来像是在 Nuxt 构建期间被翻译成完整路径的东西。
（参考 The alias Property）。

Cypress 有一个单独的版本，不知道这个 Nuxt 特性。您可以尝试通过 preprocessor 使用一些 webpack 配置复制它，但另一种方法是让您的 Nuxt 应用程序在 window 对象

上引用 lab_model

// somewhere in the Nuxt app
if (window.Cypress) {
  window.lab_model = LAB_MODEL;
}

然后在测试的顶部

const lab_model = cy.state('window').lab_model;

这样做的好处是可以为您提供完全相同的 lab_model 实例，以防您想要存根。

在启动 Nuxt 应用程序中，我在 /pages/index.vue 中添加了代码 window.lab_model = LAB_MODEL，但您可以在导入它的任何组件中添加它，就在 import 语句之后。

在规范中添加一个 .should() 来测试属性是否存在，让应用程序有时间来解决。

it('gets labModel from the Nuxt app', () => {

  cy.visit('http://localhost:3000/')

  cy.window()
    .should('have.property', 'lab_model')  // retries until property appears
    .then(labModel => {

      console.log(labModel)

      // test with labModel here
    })
})

赛普拉斯无法识别我从外部 /cypress 目录导入的模块

Cypress not recognizing my imported module from outside /cypress directory

javascript

nuxt.js

integration-testing

cypress