LoginSignup
6

More than 5 years have passed since last update.

[WIP] Rails + Webpacker + Vue + Jestのためのテスト環境構築

Last updated at Posted at 2017-09-26

Rails + Webpacker + Vue + Jestでテスト環境を作りました
とりあえず環境ができるとこまでをメモがわりに

Install

  • install jest
    docker-compose run --rm app bin/yarn add jest --dev

  • babel用のライブラリを追加
    docker-compose run --rm app bin/yarn add babel-jest babel-polyfill --dev

  • 設定追加

    • touch vendor/package.json
    {
      "jest": {
        "testPathDirs": ["<rootDir>/../app/javascript/packs"],
        "moduleDirectories": ["<rootDir>/node_modules"],
        "moduleFileExtensions": ["js", "vue"]
      }
    }
    
    • edit package.json
    ...
    "scripts": {
      "test": "./node_modules/.bin/jest"
    }
    

とりあえずFailできるとこまで動いた

# bin/yarn test
yarn test v0.27.5
$ ./node_modules/.bin/jest

// なんか色々エラー

Test Suites: 8 failed, 8 total
Tests:       0 total
Snapshots:   0 total
Time:        13.825s
Ran all test suites.
error Command failed with exit code 1.

動作確認用のコード

// app/javascript/packs/sample.js
function sum(a, b) {
  return a + b
}

module.exports = sum
// app/javascript/packs/test/sample.test.js
const sum = require('../sample.js')

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

動くようにライブラリ・設定追加

  • add jest preprocessor docker-compose run --rm app bin/yarn add jest-vue-preprocessor --dev
{
  "jest": {
    ...
    "moduleNameMapper": {
        "^vue$": "vue/dist/vue.common.js"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    }
  }
}

:tada: Pass!

bin/yarn test app/javascript/packs/test/
yarn test v0.27.5
$ ./node_modules/.bin/jest "app/javascript/packs/test/"
 PASS  app/javascript/packs/test/sample.test.js
  ✓ adds 1 + 2 to equal 3 (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.552s
Ran all test suites matching /app\/javascript\/packs\/test\//i.
Done in 37.26s.

Todo

  • Vueのコンポーネントテスト
  • yarn testにディレクトリ指定を渡さなくてもよくしたい

参考文献

https://github.com/pstjean/webpacker-jest
https://hackernoon.com/jest-for-all-episode-1-vue-js-d616bccbe186
https://facebook.github.io/jest/docs/en/webpack.html
https://alexjoverm.github.io/2017/08/21/Write-the-first-Vue-js-Component-Unit-Test-in-Jest/

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
6