Next.jsのプロジェクトにCypressを導入してGitHub Actionsで走るようにする
こんにちはsemiguraです。
TL;DR
yarn add -D cypress- 生成された
integration以下にテストを書く - GitHub Actionsで走らせるにはMarketplaceにある公式の
cypress-io/github-actionを使う
環境
Next.js 12.0.8 + Cypress 9.3.1
本題
Cypress導入
yarn add -D cypress
- これでプロジェクトのルートディレクトリに
cypressディレクトリが作られる。 - 中身は以下。 - fixtures/ - integration/ - plugins/ - support/ - デフォルトで入っているのは全てサンプルデータ。
テストを書く
integration/foo.spec.js
describe("index.tsx", () => {
it("Successful access", () => {
cy.visit("http://localhost:3000");
});
});
integration/foo.spec.jsにテストを書く。yarn cypress openでCypressを起動してテストを実行できる。
GitHub Actionsを追加する
.github/workflows/main.yml
name: End-to-end tests on: push jobs: cypress-run: runs-on: ubuntu-20.04 steps: - name: Checkout uses: actions/checkout@v2 - name: Cypress run uses: cypress-io/github-action@v2 with: start: npm run dev
- Marketplaceにある公式の
cypress-io/github-actionを使う。 - この時ローカルサーバーを立ち上げる必要があるので
with: start: npm run devを書いておく。
