賽普拉斯無法識別我從 /cypress 目錄外部導入的模塊

Question

我正在嘗試將 /cypress 目錄之外的文件中的模塊導入 /cypress/integration 目錄的 test.spec.js 文件，如下所示：

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

但是在這個導入的模塊“LAB_MODEL”中，在文件導入的開頭使用“@@”導入了其他文件，例如

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

我認為這就是賽普拉斯不工作並給我這個錯誤的原因：

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

所以我認為這就是我的測試無法運行的原因，但我不知道如何讓賽普拉斯識別“@@”導入並且找不到任何文檔/stackoverflow 答案，感謝任何幫助，謝謝！

Answer 1

@@/看起來像是在 Nuxt 構建期間被翻譯成完整路徑的東西。
（參考別名屬性）。

Cypress 有一個單獨的版本，它不知道這個 Nuxt 功能。 您可以嘗試通過預處理器使用一些 webpack 配置復制它，但另一種方法是讓您的 Nuxt 應用程序在 window lab_model上引用 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 /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
    })
})