GitHubActionsを用いて、爆速でNuxt.jsのコンポーネントテストをCIで動かす

この記事を実際に行うのにかかる時間

Node.jsがインストールできていれば、１０分程度で終わると思います。

環境

環境は、下記の環境で行います。

$ yarn -v
1.22.5

$ node -v
v14.15.0

プロジェクト作成と動作確認

まず、Nuxt.jsのプロジェクトを作ります。

yarn create nuxt-app HelloGitHubActions

下記のスクリーンショットの通りになるように選択肢を選択してください

下記のコマンドをうつと、nuxt.jsのdev環境が動きます。

$ cd HelloGitHubActions
$ yarn dev

http://localhost:3000
にアクセスしてみてください

GitHubにプッシュ

GitHubで作成したリポジトリに、Nuxt.jsのプロジェクトを、プッシュしてください。

GitHub ActionsのActionsタブで、CIが動きます！

テストを書く

落ちるテストを書いてみましょう。

test/MessageComponent.spec.js

import { mount } from '@vue/test-utils'
import MessageComponent from '@/components/MessageComponent.vue'

describe('メッセージを表示するコンポーネントのテスト', () => {
  test('Hello Worldとメッセージを表示する', () => {
        const wrapper = mount(MessageComponent, {
            propsData: {
                msg: 'Hello world'
            }
        })
    expect(wrapper.text()).toContain('Hello world')
  })
})

こちらのファイルを、書いたら、GitHubに、pushしてください

GitHub Actionsを見ると、、、

正しく落ちました！

テストが成功するように修正する

テストが成功するように、コンポーネントを追加しましょう

components/MessageComponent.vue

<template>
    <div> {{msg}} </div>
</template>
<script>
export default {
    props:{
        msg: {
            type: String
        }
    }
}
</script>

こちらのコンポーネントを追加してください。
GitHubにプッシュしてください。

GitHub Actionsのタブから確認すると

正しくテストが通っています！

簡単にCI環境が構築できる、GitHub Actionsはすごいですね！