Zenn
💬

[まとめ] Jest について

2021/09/09に公開
Nuxt
Vue.js
Test
Jest
#
knowledge
tech

Jest とは

https://jestjs.io/ja/

Jestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツール

Jest には

  • テストランナー
  • カバレッジ計測
  • モック
  • アサーション

など テストの実行を含めた 様々な機能がオールインワンで提供されているため
今後のプロジェクトの展開において、Jest だけでunitテストを作成することができる

vueファイルからなる components に対するテストだけでなく BFF側のテストも作成できる

Jest の設定について

  testEnvironment: 'jsdom', // 仮想ブラウザ環境で Node.js でテストを実行する

  transform: {
    '^.+\\.js$': 'babel-jest',  // js 系は babel-jest で指定のECMAでコンパイル
    '.*\\.(vue)$': 'vue-jest' // vue-jest でコンパイル
  },
  • カバレッジ設定
  collectCoverage: true, // カバレッジ機能の有効化
  collectCoverageFrom: ['app/components/**/*.vue', 'server/**/*.{js}'], // パターンマッチングで指定したファイルからカバレッジ計測
  coverageDirectory: 'coverage', // カバレッジの計測結果を配置するディレクトリの指定
  • レポート (テスト結果)設定
    • CIで テスト結果を食わせて、落ちやすいテストなどを検出するための設定
  reporters: [
    'default',
    [
      'jest-junit',
      {
        suiteName: 'jest tests',
        outputDirectory: 'reports/jest',
        outputName: 'js-test-results.xml',
        classNameTemplate: '{classname}-{title}',
        titleTemplate: '{classname}-{title}',
        ancestorSeparator: ' › '
      }
    ]
  ]

Jest テスト カバレッジ の見方

上記の２つのリンクを参照

references

Discussion