使用 Cypress 和 Next.js 14 解决“Webpack 编译错误 - 找不到模块”

Question

我有一些 util 函数，我可以用 cypress 来测试它们，并使用下一个结构：

[next-js-project]
│
├── utils
│    ├── NumberUtils.ts
│    └── StringUtils.ts   
│
└── constants
     └── constants.ts

测试 StringUtils 函数时一切似乎都工作正常，因为它不需要从其他文件导入。

StringUtils.ts

// Check if the given value is a type of string
export const isString = (value: any): Boolean => {
   if (typeof value === 'string' || value instanceof String) {
      return true;
   }

   return false;
}

// Check if the given string is empty or blank
export const isBlank = (value: string): Boolean => {
   if (value == '' || value.trim().length === 0) {
      return true;
   }

   return false;
}

NumberUtils.js

import { currencies } from "@/constants/constants";

export const formatNumberToCurrency = (currency: string, number: number) => {
  currency = currency ? currency : 'USD'
  
  let formatted = new Intl.NumberFormat(getLocale(currency), {
    style: "currency",
    currency: currency,
  }).format(number)

  return formatted
}

问题是当尝试测试使用带有“@/”别名的导入的函数时。

赛普拉斯/e2e/utils.cy.ts

/// <reference types="cypress"/>

import { isString, isBlank, truncateString, fillZerosOnTheLeft } from "../../../utils/StringUtils";
import { roundTwoPlaces } from "../../../utils/NumberUtils";

context('Testing Util functions', () => {
   it('should test StringUtils functions', () => {
      // isString Tests
      expect(isString(undefined)).to.be.false
      // ...
   });

   it('should test NumberUtils functions', () => {
      // roundTwoPlaces Tests
      expect(formatNumberToCurrency('USD', 10)).to.equal('$ 10,00') /// <-- The error happens here.
   });
})

Error: Webpack Compilation Error
Module not found: Error: Can't resolve '@/constants/constants' in 'C:\Users\myuser\Desktop\next-js-project\utils'
    at Watching.handle [as handler] (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:212:23)
    at C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Watching.js:303:9
    at Hook.eval [as callAsync] (eval at create (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Watching.js:299:28)
    at C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Watching.js:213:21
    at Compiler.emitRecords (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:919:5)
    at C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Watching.js:191:22
    at C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\myuser\AppData\Local\Cypress\Cache\13.6.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:882:27...

我对 cypress 及其配置很陌生。我如何解决这种可能成为问题的想法，而不替换其他文件夹中的别名“@/...”？

Answer 1

将依赖项迁移到 TypeScript 后，我遇到了同样的问题（我使用的是 Cypress 13.9.0）。你找到解决办法了吗？