LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-30

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

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

環境

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

$ yarn -v
1.22.5

$ node -v
v14.15.0

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

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

yarn create nuxt-app HelloGitHubActions

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

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

$ cd HelloGitHubActions
$ yarn dev

http://localhost:3000
にアクセスしてみてください
スクリーンショット 2020-11-30 19.07.47.png

GitHubにプッシュ

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

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

スクリーンショット 2020-11-30 20.53.24.png

テストを書く

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

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を見ると、、、
スクリーンショット 2020-11-30 21.23.15.png

正しく落ちました!

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

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

components/MessageComponent.vue
<template>
    <div> {{msg}} </div>
</template>
<script>
export default {
    props:{
        msg: {
            type: String
        }
    }
}
</script>

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

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

スクリーンショット 2020-11-30 21.23.15.png
正しくテストが通っています!

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1