Angular(Nx)プロジェクトにCypress Component Testingを導入する

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 です。

コメント

タイトルとURLをコピーしました