javascript - Cypress 无法识别我从/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 识别“@@”导入并且找不到任何文档/stackoverflow 答案，感谢任何帮助，谢谢!

Answer 1

@@/看起来像是在 Nuxt 构建期间被翻译成完整路径的东西。
(引用 The alias Property)。
Cypress 有一个单独的版本，它不知道这个 Nuxt 功能。您可以尝试通过 preprocessor 使用一些 webpack 配置来复制它。 ，但另一种方法是让您的 Nuxt 应用程序引用 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 实例。 ，以防你想 stub 。

在入门 Nuxt 应用程序中，我添加了代码 window.lab_model = LAB_MODEL在 /pages/index.vue ，但您可以将其添加到任何导入它的组件中，就在 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
    })
})