Cypress Component Testingを導入する時にエラーが発生したので記事にしました。
同じエラーに遭遇した人の参考になれば。
Cypress Component Testingとは
e2eで使われてるCypressでComponent Testができる。
対応フレームワークは、React, Next, Angular, Vue, Nuxt, Sveltと幅広く対応しています。
ドキュメントを参考に導入してみる
Angular Quickstartを参考にやってみた
Angular Quickstart | Cypress Documentation
Welcome! This tutorial will walk you through creating an Angular app and using Cypress Component Testing to test it. We assume you are already familiar
docs.cypress.io
すごい簡単で、npx cypress openを実行したあとは、GUIでポチポチしていくだけです
しかし、エラーが発生(Nx使ってるから？）
GUIで進めていくとこのエラーメッセージが。。。
Your configFile threw an error from: cypress.config.js
We stopped running your tests because your config file crashed.
angular.jsonにプロジェクトタイプapplicationが見当たらないみたいなエラーメッセージもある。
たしかに、プライベートで使ってるangularプロジェクト見てみると、angular.jsonにprojectTypeない。
エラー回避方法
他にやり方ないかな？と調べてたら、下記のサイトを発見。
@nrwl/angular:cypress-component-configuration | Nx
Add a Cypress component testing configuration to an existing project. Cypress v10.7.0 or higher is required.
nx.dev
このコマンドで解決
※your-projectはapp or library
Component Testを実行
それでは実行してみます！
こちら記載の通り、nx component-test your-lib --watchを実行すると、下記の画面が立ち上がるので、Chrome, Electron, Firefoxから好きなの選んで、Start Component Testingボタン押下
テストが1個もないので。。。
追加してみた
最後に
コードはこちら
GitHub - ksakae1216/angular2022 at cf3523777dc21e1a572632c24aca071556b8ee43
Contribute to ksakae1216/angular2022 development by creating an account on GitHub.
github.com
テストファイルは、login-form.component.cy.ts です。
コメント