Nuxt on Dockerにtestcafeを導入する

いま盛り上がっているTwitterスペース、気になるトピックを語っているTwitterスペースなどをかんたんに見つけられるspaces.bz（クローズ済み）というプロダクトを友人と運営しています。

特に開発の初期段階なので、機能追加も頻繁に行っており、勇気と自信をもってプロダクトションへのデプロイを繰り返すためには、やはりテストの自動化が必要です。 spaces.bzはNuxt.js on Dockerで開発しており、今回は TestCafe でテスト自動化を導入しています。 TestCafeは、クロスブラウザに対応しており、テストコードも非常にわかりやすく書けるのが特徴です。今回は「Headless Chromeでテストがしたい」、テストコードに馴染みのない友人と一緒に開発のため「わかりやすいテストコード」が良いという2つの理由からTestCafeを利用しました。

この記事では、Nuxt on Dockerの環境でTestCafeを導入し、かんたんなテストを実行するところまでをまとめていきます💪。

準備

Dockerfileとdocker-compose.ymlは次のようなものを想定しています。

FROM  node
ENV   HOME=/app \
      HOST=0.0.0.0

WORKDIR ${HOME}

COPY  package.json ${HOME}
COPY  yarn.lock ${HOME}
RUN   yarn install
COPY  . ${HOME}

EXPOSE  3000
CMD     ["yarn", "dev"]

version: "3"

services:
  app:
    build: .
    volumes:
      - .:/app
    ports:
      - 3000:3000

TestCafeをインストールする

TestCafeのパッケージをインストールします。今回はyarnを使っているので、以下のコマンドを実行します。

docker compose run app yarn add --dev testcafe

DockerfileでChromeをインストールする

今回はHeadless Chromeを使ってテストをしたいので、DockerコンテナでChromeを起動できる状態にしておく必要があります。

...略...
WORKDIR ${HOME}

RUN   wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
      sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
      apt-get update && \
      apt-get install -y google-chrome-stable && \
      apt-get install -yq fonts-noto-cjk

COPY  package.json ${HOME}
COPY  yarn.lock ${HOME}
RUN   yarn install
COPY  . ${HOME}
...略...

ChromeのStable版と、日本語のフォントを表示するためにfonts-noto-cjkをインストールするように追記しました。追記ができたらビルドして、Dockerイメージを作成しましょう。

docker compose build

コマンドでTestCafeを起動できるようにする

次はコンテナでTestCafeを起動するコマンドの準備をしていきます。コンテナでyarn test のコマンドを実行したときにTestCafeが動くようにしましょう。

...略...
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
  "generage": "nuxt generate",
  "test": "testcafe chrome:headless"
},
...略...

testcafeの後ろにchrome:headlessを与えることでHeadless Chromeをコンテナ内で起動してテストしようとしてくれるんですね。詳しくはこのへんに書いてます。

テストコードを書く

いよいよテストコードです。まずはテスト用のディレクトリとファイルを作っておきましょう。

mkdir tests
touch tests/sample.test.js

テストの内容は「トップページにアクセスして、<h1>タグでHello World!!と表示されていること」を検証してみましょう。

import { Selector } from 'testcafe'

fixture('Sample')
  .page('http://localhost:3000')

test('トップページに<h1>タグで"Hello World!!"と表示されていること', async t => {
  await t
    .expect(Selector('h1').innerText).eql('Hello World!!')
})

なんか読みやすそうです😃。 fixtureでテスト全体に関する設定とかを行っています。このテストファイルはSampleって名前で、http://localhost:3000にアクセスするところから始まるよって感じです。 testでその後の操作や検証を書いていきます。testは1ファイルに複数書けます。今回は.expect(A).eql(B)を使ってAとBが一緒であることを検証してみます。 Aの方はSelector('h1').innerTextと書きました。最初に現れたh1タグのinnerTextを取得してます。こんな感じで使い慣れたJavaScriptも使えるんですね。 Bの方にHello World!!の文字列を書けば、「最初に現れたh1タグのinnerTextがHello World!!と一致すればテスト成功」となります。

ページを編集

このままテストを実行しても失敗するので、ページも編集しておきます。 TDDでやってみたい場合は、この時点で一度テストを実行してFailになることを確認してもOKです😆。

<template>
  <div>
    <h1>Hello World!!</h1>
  </div>
</template>

テストを実行する

ではテストを実行しましょう。テストを実行する前にコンテナを起動させておきます。

docker compose up -d

そして、execを使って起動したコンテナ内でTestCafeを実行します。

$ docker compose exec app yarn test tests/sample.test.js

yarn run v1.22.5
$ testcafe chrome:headless tests/sample.test.js
 Running tests in:
 - Chrome 93.0.4577.82 / Linux 0.0

 Sample
 ✓ トップページに<h1>タグで"Hello World!!"と表示されていること

 1 passed (2s)
Done in 31.12s.

PASSしました。出力も非常にわかりやすいですね。

まとめ

この記事では、Nuxt on DockerにTestCafeを導入して、かんたんな自動テストを書いてみました。自動テストがあれば、機能追加を頻繁に行なう環境でも勇気と自信を持ってデプロイできます。そして、 TestCafe はとても直感的なテストコードを書け、クロスブラウザにも対応しているすぐれものでした。

気に入っていただけたら、サポートもお待ちしております！