（備忘録）Jestの導入（Laravel）

jestのインストール

npm install jest --save-dev

rootディレクトリに jest.config.js を作成し下記の通り編集

module.exports = {
  testRegex: 'resources/js/test/.*.spec.js$'
}

resources/js/test/index.spec.js を作成し下記の通り編集

test('it works', () => {
  expect(1 + 1).toBe(2)
})

package.json に下記の通り書き込む

"scripts": {
    "test": "jest"
}

npm test

npm test

> @ test /Users/someone/some/project
> jest

 PASS  resources/js/test/index.spec.js
  ✓ it works (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.216 s
Ran all test suites.

Vueをjestでテストする

vue-jest babel-jest @vue/test-utils をインストール

npm i --save-dev vue-jest babel-jest @vue/test-utils

jest.config.js を下記の通り編集する

module.exports = {
  testRegex: 'resources/assets/js/test/.*.spec.js$',
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  'transform': {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
}

ルートディレクトリに .babelrc を追加し下記の通り記述する。

{
  "presets": [
    "env"
  ]
}

下記、Example.vue のテスト

// resources/assets/js/test/index.spec.js

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

test('it works', () => {
  expect(1 + 1).toBe(2)
})

test('should mount without crashing', () => {
  const wrapper = mount(ExampleComponent)

  expect(wrapper).toMatchSnapshot()
})