Nuxt のテストの実行環境を整える - inokawablog

Nuxt のテストの実行環境を整える

Unitテスト・E2Eテスト・ビジュアルリグレッションテストの環境整備に関して書いていく。

Unit(単体)テスト

Unitテストとはプログラムを構成する比較的小さな単位が個々の機能を正しく果たしているかどうかを検証するテストです。

関数単位でテストしたり、コンポーネント単位でテストしたりします。

Jestを使用します。

ライブラリのインストール

$ yarn add -D jest ts-jest vue-jest babel-jest @vue/test-utils @types/jest

jest.config.jsを設定

jest.config.jsを以下の内容で作成してください。

module.exports = {
  preset: 'ts-jest',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/src/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    '^.+\\.ts$': '<rootDir>/node_modules/ts-jest',
    '.+\\.(css|scss|png|jpg|svg)$': 'jest-transform-stub'
  },
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json'
    }
  },
  collectCoverage: true,
  collectCoverageFrom: ['<rootDir>/src/{components, projects}/**/*.{vue,ts}']
}

【ここからはWIP】 現在検証中です。。。

E2Eテスト

E2Eテストは単体テストとは違いシステム全体を実稼働時に近い状況で動かしつつテストする手法です。実際にサーバー、ブラウザを立ち上げた状態でブラウザの操作をしながらテストしたりします。

ライブラリのインストール

puppeteerを使用します。

$ yarn add -D puppeteer jest-puppeteer

jest-puppeteer.config.jsを設定

jest-puppeteer.config.jsを以下の内容で作成してください。

module.exports = {
  launch: {
    headless: true,
    slowMo: 250
  },
  server: {
    command: 'yarn run testServer',
    port: 3000,
    launchTimeout: 50000
  }
}

jest.e2e.config.jsを追加

module.exports = {
  verbose: true,
  preset: 'jest-puppeteer'
}

test/e2e/にテストを作成

index.spec.js

describe('Index page', () => {
  let page;

  beforeAll(async () => {
    jest.setTimeout(50000)
    page = await browser.newPage()
    await page.goto('http://127.0.0.1:3000')
  });

  afterAll(async () => {
    await page.close()
  });

  it ('Display catch copy ', async () => {
    let text = await page.evaluate(() => document.body.textContent)

    await expect(text).toContain('トップページです');
  })
});

package.jsonにスクリプトを追加します

"test:e2e": "jest --config jest.e2e.config.js --runInBand ./test/e2e",

ビジュアルリグレッションテスト

https://engineering.linecorp.com/ja/blog/visual-regression-otoshidama/

https://blog.logrocket.com/automated-visual-regression-testing-with-jest/

ビジュアルリグレッションテストとはスクリーンショットから生成された画像に対し、前後で表示に差分が出ていないか検証するテストのことです。

リモートとローカルではスナップショットに差分が生じる場合があるので、Docker環境で行えば解決する。

現在調査中。。。