📸

Cypress Component Test Runner を Vite & React で試す

2021/04/10に公開

React

Cypress Component Test Runner

Cypress 7.0.0 より、 2021/04/10 時点ではまだ Alpha 段階ですが Cypress Component Test Runner という機能が追加されました。（@sekikazu01 さんのツイートで知りました。）

E2E テストのようにブラウザ上で実際にレンダリングしつつ、コンポーネントテストのような軽快さで動くという、中間的な位置付けと捉えています。

試してみる (Vite)

create-react-app や vue-cli を使ったチュートリアルが用意されているので、とりあえず確認してみたい場合はそちらが良さそうでした。

ドキュメントも存在しており、webpack-dev-server を利用する場合はそちらが参考になりそう。

ただ、そのままやってもテンションが上がらないので、紹介記事には

As of today, the Cypress core team officially supports the following libraries and bundlers: React, Vue, Webpack, Rollup*, and Vite*.

との記述もあることなので、今回は Vite を使って試してみました。

まずは雑に create します。テンプレートは react-ts で。

yarn create @vitejs/app cypess-test-vite

cd cypess-test-vite

cypress 関連の依存を追加します。 @cypress/vite-dev-server を使います。

yarn add cypress @cypress/react @cypress/vite-dev-server --dev

cypress.json に設定を追記します。コンポーネントとテストコードの配備箇所を指定します。

cypress.json

{
  "component": {
    "testFiles": "**/*.test.{js,ts,jsx,tsx}",
    "componentFolder": "src"
  }
}

最後に、cypress/plugins/index.js を追加します。

このあたりは https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server の README に記述があります。

が、そのままだと ESModules の解決で普通にエラーになるので、import は require に変えてます。

cypress/plugins/index.js

const { startDevServer } = require("@cypress/vite-dev-server");

module.exports = (on, config) => {
  on("dev-server:start", async (options) => startDevServer({ options }));

  return config;
};

そしてなぜか @vue/compiler-core がないとエラーになるので依存に追加します。React なのに..

yarn add -D @vue/compiler-core

テストを追加します。

src/App.test.tsx

import React from "react";
import { mount } from "@cypress/react";
import App from "./App";

it("render App component", () => {
  mount(<App />);
  cy.get("p").contains("Hello Vite + React!");

  cy.contains("count is: 0");

  cy.get("button").click();
  cy.get("button").click();
  cy.get("button").click();

  cy.contains("count is: 3");
});

実行してみましょう。

yarn cypress open-ct

というわけで無事に動きました。

コードを変更すると自動的に再実行されるのも確認できます。Vite 自体が爆速なので、とてもサクサク動いて良い感じです。

基本は Cypress なことに変わりはないので、ひとつひとつのアサーションを遡って、ある瞬間のスナップショットも確認できます。

感想

E2E テストはブラウザで走るため、実環境でのみ発生する問題などをキャッチアップできるなどさまざまなメリットがありますが、一方で構築が大変だったり、実行がヘヴィーになりがちだったりという課題を抱えがちです。Cypress Component Test Runner の場合はかなり軽量に動き、専用に webpack などの設定を用意する必要もなく、セットアップも簡単でした。見た目を確認しつつ高速な TDD ができるのは体験としてはよかったです。

ただ、コンポーネントを横断した振る舞いの検証はできず、完全に E2E テストを置き換えたりするようなものではなさそうです。採用する場合、そのあたりの棲み分けはどうすべきかも検討していく必要がありそうです。

個人的にはわりといいな〜と思ったので、今後も動向は気にしていこうと思います 👀

GitHubで編集を提案

Cypress Component Test Runner

試してみる (Vite)

感想

Discussion