Cypress:通过别名导入模块

Question

在我的项目中，我使用柏树与纯javascript。我正面临着通过别名而不是像../../../../folder/page.js这样的意大利面条代码导入模块(页面对象)的挑战。我使用typescript或react.js和不有一个src文件夹/目录。

我的测试运行在浏览器本地或通过docker图像(管道)。

我想从这个转换:

import { LoginPage } from "../../pages/loginPage.js";

变成这样:

import { LoginPage } from "@Pages/loginPage.js";

但是我总是得到一个错误:

Error: Webpack Compilation Error
./cypress/e2e/accountOverview/accountOverviewPageTest.spec.js
Module not found: Error: Can't resolve 'Pages/loginPage.js' in 'C:UsersUserautomated_frontend_testsautomated_frontend_testscypresse2eaccountOverview'
resolve 'Pages/loginPage.js' in 'C:UsersUserautomated_frontend_testsautomated_frontend_testscypresse2eaccountOverview'
Parsed request is a module
using description file: C:UsersUserautomated_frontend_testsautomated_frontend_testspackage.json (relative path: ./cypress/e2e/accountOverview)
Field 'browser' doesn't contain a valid alias configuration
Looked for and couldn't find the file at the following paths:
[C:UsersUserautomated_frontend_testsautomated_frontend_testscypresse2eaccountOverviewnode_modules]
[C:UsersUserautomated_frontend_testsautomated_frontend_testscypresse2enode_modules]
[C:UsersUserautomated_frontend_testsautomated_frontend_testscypressnode_modules]
[C:Usersnode_modules]
[C:node_modules]
[C:UsersUserautomated_frontend_testsautomated_frontend_testsnode_modulesPagesloginPage.js]
[C:UsersUserautomated_frontend_testsnode_modulesPagesloginPage.js]
[C:UsersUsernode_modulesPagesloginPage.js]
[C:UsersUserautomated_frontend_testsautomated_frontend_testsnode_modulesPagesloginPage.js.js]
[C:UsersUserautomated_frontend_testsnode_modulesPagesloginPage.js.js]
[C:UsersUsernode_modulesPagesloginPage.js.js]
[C:UsersUserautomated_frontend_testsautomated_frontend_testsnode_modulesPagesloginPage.js.json]
[C:UsersUserautomated_frontend_testsnode_modulesPagesloginPage.js.json]
[C:UsersUsernode_modulesPagesloginPage.js.json]
[C:UsersUserautomated_frontend_testsautomated_frontend_testsnode_modulesPagesloginPage.js.jsx]
[C:UsersUserautomated_frontend_testsnode_modulesPagesloginPage.js.jsx]
[C:UsersUsernode_modulesPagesloginPage.js.jsx]
[C:UsersUserautomated_frontend_testsautomated_frontend_testsnode_modulesPagesloginPage.js.mjs]
[C:UsersUserautomated_frontend_testsnode_modulesPagesloginPage.js.mjs]
[C:UsersUsernode_modulesPagesloginPage.js.mjs]
[C:UsersUserautomated_frontend_testsautomated_frontend_testsnode_modulesPagesloginPage.js.coffee]
[C:UsersUserautomated_frontend_testsnode_modulesPagesloginPage.js.coffee]
[C:UsersUsernode_modulesPagesloginPage.js.coffee]
@ ./cypress/e2e/accountOverview/accountOverviewPageTest.spec.js 5:17-46

我尝试了几种解决方案，包括:

//webpack.config.js
module.exports = {
resolve: {
alias: {
"@pages": path.resolve(__dirname, "cypress/pages/*"),
},
},
};

//testspec file
import { LoginPage } from "@pages/loginPage.js";
const loginPage = new LoginPage();

@Uzair汗:我试了你的办法，但还是不管用。错误信息保持不变。似乎IDE没有在正确的文件夹中搜索，而只在[e-mail]中搜索，这没有意义。如果我输入const loginPage = new LoginPage()，模块LoginPage()也无法被IDE找到。解决方案出了问题。我还需要通过NPM安装任何软件包吗?

Answer 1

在您的webpack.config.js文件中添加resolve.alias，您想要制作别名。它看起来像下面这样:

resolve: {
alias: {
'@page': path.resolve(__dirname, '{path you want to make alias}')
}
}

由于您正在使用柏树，您必须更新cypress.config.js中的解析路径。这是我的cypress.config.js

import { defineConfig } from 'cypress'
import webpack from '@cypress/webpack-preprocessor'
import preprocessor from '@badeball/cypress-cucumber-preprocessor'
import path from 'path'
export async function setupNodeEvents (on, config) {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await preprocessor.addCucumberPreprocessorPlugin(on, config)
on(
'file:preprocessor',
webpack({
webpackOptions: {
resolve: {
extensions: ['.ts', '.js', '.mjs'],
alias: {
'@page': path.resolve('cypress/support/pages/')
}
},
module: {
rules: [
{
test: /.feature$/,
use: [
{
loader: '@badeball/cypress-cucumber-preprocessor/webpack',
options: config
}
]
}
]
}
}
})
)
// Make sure to return the config object as it might have been modified by the plugin.
return config
}

并通过cypress.config.js中设置的别名导入其他文件。下面是我的例子:

import page from '@page/visit.js'
const visit = new page()
When('I visit duckduckgo.com', () => {
visit.page()
})

Answer 2

我想这两个答案都差不多了，这就是我对src文件的要求:

const webpack = require('@cypress/webpack-preprocessor')
...
module.exports = defineConfig({
...
e2e: {
setupNodeEvents(on, config) {
...
// @src alias
const options = {
webpackOptions: {             
resolve: {                 
alias: {                     
'@src': path.resolve(__dirname, './src')              
},             
},         
},     
watchOptions: {},
}
on('file:preprocessor', webpack(options))
...

path.resolve()将相对路径解析为绝对路径，因此您需要以./或../开始第二个参数。

另外，不要在路径中使用通配符*，您只需要一个单独的文件夹，它将替换import语句中的别名。

如果有疑问，检查返回的文件夹(在终端中)

module.exports = defineConfig({
...
e2e: {
setupNodeEvents(on, config) {
const pagesFolder = path.resolve(__dirname, './cypress/pages')
console.log('pagesFolder', pagesFolder)