Cypress для проекта библиотеки Angular
У меня есть проект библиотеки Angular, в котором есть множество компонентов, которые я использую в нескольких приложениях Angular.
Теперь я хочу начать тестирование этих компонентов с помощью тестирования компонентов Cypress. Настроить Cypress с помощью приложения Angular очень просто, но пытаться сделать это для библиотечного проекта определенно нет.
На самом деле у меня нет кода, который можно было бы показать, поскольку все мои усилия приводят к одной и той же ошибке:
Error: Could not resolve "@angular-devkit/build-angular/src/webpack/configs/common.js". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?
at C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:106:19
at Array.map ()
at getAngularCliModules (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:100:151)
at async getAngularCliWebpackConfig (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:159:101)
at async angularHandler (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:205:27)
at async getPreset (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:94:20)
at async Function.devServer.create (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:111:61)
at async C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:26:24
Я пробовал настроить Cypress как с помощью @cypress/schematic, так и с помощью npm install cypress --save-dev, но безрезультатно.
Я наткнулся на эту проблему на github, пытаясь найти информацию о том, как добиться того, чего я хочу. В нем говорится о библиотечном проекте, требующем настройки приложения, чтобы он работал, но я понятия не имею, как это сделать, и примеров также не приведено.
Если кому-то удалось это настроить, мне бы хотелось получить некоторые рекомендации!
В настоящее время я использую Angular версии 18 и Cypress версии 13.
Ответы 2
Прежде всего, кажется, вы используете Cypresss 13.11.0, а последняя версия 13.12.0 на момент написания этой статьи. Это актуально, поскольку в 13.12.0 представлена поддержка тестирования компонентов для Angular v18
Что касается настройки, мне удалось настроить тестирование компонентов Cypress для Angular v18, добавив фиктивное приложение в рабочую область (ng g app dummy). Это связано с тем, что Cypress считывает конфигурацию приложения Angular для создания компонента и, если приложения нет, не знает, какую конфигурацию использовать. Это упомянуто в проблеме GitHub, на которую вы указали. На данный момент это кажется самым простым и недорогим в обслуживании.
Подробности смотрите в этом репозитории:
https://github.com/davidlj95/angular-lib-cypress-comComponent-testing
Однако не удалось воспроизвести вашу конкретную ошибку. Но надеюсь, что эти две вещи решат вашу проблему :)
Спасибо @davidlj95! Я постараюсь найти время, чтобы проверить ваш репозиторий и протестировать решение как можно скорее. Я очень ценю усилия!
Я попробовал и запустил! Огромное спасибо! Однако при попытке использовать существующий проект у меня были первоначальные ошибки, но оказалось, что у меня установлена старая версия @angular-devkit/core, которая и вызвала ошибку.
Вы можете указать sourceRoot: 'projects/sample-lib/src/lib' в параметрах devServer, чтобы избежать создания фиктивного приложения.
Из Angular - Options API и исходного кода angularHandler это минимальная конфигурация, которую я придумал, чтобы сделать образец библиотеки пригодным для тестирования:
import { defineConfig } from "cypress";
export default defineConfig({
component: {
devServer: {
framework: "angular",
bundler: "webpack",
options: {
projectConfig: {
root: '',
sourceRoot: 'projects/sample-lib/src/lib',
buildOptions: {
outputPath: 'dist/sample-lib',
}
}
}
},
specPattern: "**/*.cy.ts",
},
});
Я думаю, что он у вас заработал из-за root и sourceRoot, но projectType на самом деле не является projectConfig допустимым вариантом: github.com/cypress-io/cypress/blob/v13.12.0/cli/types/… Это используется при поиске проекта по умолчанию в вашем angular.json, если проект по умолчанию не определен github.com/cypress-io/cypress/blob/v13.12.0/npm/… Но не как конфигурация Cypress для Angular
Вот почему он не отображается в документации Cypress о параметрах Angular для тестирования компонентов: docs.cypress.io/guides/comComponent-testing/angular/…
Davidj95 — тип projectType здесь
По умолчанию здесь application , поэтому вам потребуется взломать фиктивное приложение, если вы не предоставите правильную конфигурацию.
Да, этот тип есть, но он относится к параметрам конфигурации проекта Angular в angular.json. Поэтому он и называется AngularJsonProjectConfig. Я имею в виду вот этот: angular.dev/reference/configs/…. По умолчанию в указанной строке нет значения application. Какой код нужен для поиска проекта с типом application в angular.json, если defaultProject не определен. Там нет назначения, поэтому нет значения по умолчанию.
Некоторый код, иллюстрирующий проблему, был бы очень полезен (для тех, кто не использует Angular каждый день).