英文:
Cypress tries to access cypress.config.js instead of .ts and tries to locate a file from a mixed up path
问题
在一个NX单仓库中，我有一个Angular应用，通过Cypress运行组件测试。
在测试代码发生更改后，我偶尔会在Cypress应用中不断收到以下错误：
> configFile抛出了一个错误：cypress.config.js
>
> 由于您的配置文件崩溃，我们停止了测试的运行。
在搜索仓库中查找cypress.config.js文件时，我只找到了cypress.config.ts文件，因为整个NX仓库只使用TypeScript。
无论如何，这是我的cypress.config.ts的内容：
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
export default defineConfig(nxComponentTestingPreset(__filename));
我尝试通过以下方式更改配置来解决问题：
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
export default defineConfig({
component: {
...nxComponentTestingPreset(__filename),
devServer: {
...nxComponentTestingPreset(__filename).devServer,
options: {
projectConfig: {
...nxComponentTestingPreset(__filename).devServer.options.projectConfig,
root: 'apps/angular-app'
}
}
}
},
});
但这并没有解决问题。
此外，堆栈跟踪报告的错误显示出奇怪的行为，混淆了文件路径。它实际上将component-index.html文件的路径加倍：
> 错误：ENOENT：
>
> 没有该文件或目录，utime
> '/Users/USER/projects/frontends/apps/angular-app/Users/USER/projects/frontends/apps/angular-app/cypress/support/component-index.html'
> at utimesSync (node:fs:2047:3)
可能的原因是我正在使用较新版本的Angular吗？当通过USER@machine angular-app % npx cypress open启动Cypress测试应用时，我收到以下警告：
> 警告：组件测试不匹配的依赖关系
>
> 我们检测到您拥有不受官方支持的依赖项版本：
>
> @angular/platform-browser-dynamic。期望 ^=13.0.0 || ^=14.0.0 ||
> ^=15.0.0，但找到了16.0.1。如果您遇到问题，请降级依赖项并重新启动Cypress。
>
> Blockquote
英文:
Within an NX mono repo I have an Angular app on which I run component tests via Cypress.
I sporadically keep getting the following error in the cypress app, when a test reruns after code changes in the testing code:
> Your configFile threw an error from: cypress.config.js
>
> We stopped running your tests because your config file crashed.
When searching the repo for a cypress.config.js file I do only find cypress.config.ts files since the whole NX repo only uses TypeScript.
Anyways, this is the content of my cypress.config.ts:
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
export default defineConfig(nxComponentTestingPreset(__filename));
I've tried to solve the problem by changing the config like so:
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
export default defineConfig({
component: {
... nxComponentTestingPreset(__filename),
devServer: {
... nxComponentTestingPreset(__filename).devServer,
options: {
projectConfig: {
... nxComponentTestingPreset(__filename).devServer.options.projectConfig,
root: 'apps/angular-app'
}
}
}
},
});
But this did not solve the problem.
Also, the error that stack trace reports, is delivering a strange behaviour by mixing up file paths. It actually doubles the path to the component-index.html file:
> Error: ENOENT:
>
> no such file or directory, utime
> '/Users/USER/projects/frontends/apps/angular-app/Users/USER/projects/frontends/apps/angular-app/cypress/support/component-index.html'
> at utimesSync (node:fs:2047:3)
Could the reason be, that I am using a newer version of Angular? When starting the Cypress testing app through USER@machine angular-app % npx cypress open I receive the following warning:
> Warning: Component Testing Mismatched Dependencies
>
> We detected that you have versions of dependencies that are not
> officially supported:
>
> @angular/platform-browser-dynamic. Expected ^=13.0.0 || ^=14.0.0 ||
> ^=15.0.0, found 16.0.1. If you're experiencing problems, downgrade
> dependencies and restart Cypress.
>
> Blockquote
答案1
得分: 3
根据来源，语法应该如下：
export default defineConfig({
component: {
...nxComponentTestingPreset(__filename)
// 在此处添加您自己的配置
}
})
因此，在初始尝试中，您错过了component: {...}包装。
我认为重复的路径是因为在配置中已解析的路径被取消解析，您可以通过控制台记录nxComponentTestingPreset(__filename)提供的路径来进行检查。
提供给component: {...}的所有路径都应该是相对路径，而不是绝对路径。
英文:
According to the source, the syntax should be
export default defineConfig({
component: {
...nxComponentTestingPreset(__filename)
// add your own config here
}
})
so in the initial attempt you are missing the component: {...} wrapper.
I think the doubled-path is due to unwinding already resolved paths inside the config, you can check the paths given by console logging nxComponentTestingPreset(__filename).
All paths given to component: {...} should be relative, not absolute.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论