Cypress Component Testingを導入する時にエラーが発生したので記事にしました。
同じエラーに遭遇した人の参考になれば。
Cypress Component Testingとは
e2eで使われてるCypressでComponent Testができる。
対応フレームワークは、React, Next, Angular, Vue, Nuxt, Sveltと幅広く対応しています。
ドキュメントを参考に導入してみる
Angular Quickstartを参考にやってみた
Page Not Found | Cypress Documentation
すごい簡単で、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ない。
エラー回避方法
他にやり方ないかな?と調べてたら、下記のサイトを発見。
@nx/angular:cypress-component-configuration | Nx
Add a Cypress component testing configuration to an existing project. Cypress v10.7.0 or higher is required.
このコマンドで解決
※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.
テストファイルは、login-form.component.cy.ts です。
コメント