RspecとJestを導入する

2021年9月22日 12:04

こちらの記事を参考にすれば導入できます。

ほか参考知識

FactoryBot

モデルインスタンス生成のgem

https://qiita.com/morrr/items/f1d3ac46b029ccddd017

spec/ser_spec.rb

RSpec.describe
describe（述べる,描くって意味）

ただテストする


docker-compose run api bundle exec rspec

テスト項目が表示される

docker-compose run api bundle exec rspec spec/ --format documentation

Rspecの基本

rails のバリデーションのかけ方

https://railsguides.jp/active_record_validations.html

こちらの記事がとてもわかりやすいです。

2ヶ月ほど前にもRspecを使用してテストを書いたのですが完全に忘れていますので復習も兼ねて

user.name = ''
     expect(user).to be_invalid

user.name = ''
　user.nameを空で入力

expect(user).to be_invalid
　期待する　バリデーションエラーを吐くことを

という感じですのでバリデーションbe_invalidはバリデーションエラーで弾かれることを期待しています。

そのためuser.name = ''の部分に'name'などと入力するとバリデーションエラーにならないためバリデーションのかけ方と挙動はあっていますがテストがエラーになります。

文字数をみたい時などはpでコンソールにログを出してあげると簡単に確認できます。

Rspecはモデルテストのみですのでそこまで

jestを導入する

私の環境がドッカー環境でしたので

docker compose run --rm front yarn add -D jest vue-jest @vue/test-utils babel-jest

docker compose run --rm front yarn add -D babel-core@bridge

この2つでインストールできました。frontはフロントエンドのコンテナ名ですので適宣変えてください。

package.json の scripts に以下を追加

front/jest.config.jsを作成

module.exports = {
 testEnvironment: "jsdom",
 moduleNameMapper: {
   '^@/(.*)$': '<rootDir>/$1',
   '^~/(.*)$': '<rootDir>/$1',
   '^vue$': 'vue/dist/vue.common.js'
 },
 moduleFileExtensions: ['js', 'vue', 'json'],
 transform: {
   '^.+\\.js$': 'babel-jest',
   '.*\\.(vue)$': 'vue-jest'
 },
 'collectCoverage': true,
 'collectCoverageFrom': [
   '<rootDir>/components/**/*.vue',
   '<rootDir>/pages/**/*.vue'
 ]
}

front/babelrc を作成

{
 "env": {
   "test": {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "node": "current"
           }
         }
       ]
     ]
   }
 }
}

front/tests/sampleディレクトリを作成

front/tests/sample.spec.jsを作成

import { mount } from '@vue/test-utils'
import sample from '@/pages/sample.vue'
describe('HelloWorld', () => {
 test('display Hello World', () => {
   const wrapper = mount(sample)
   expect(wrapper.text()).toBe("Hello World")
 })
})

front/pages/sample.vueを作成

<template>
 <div>
   <p>Hello World</p>
 </div>
</template>

テストを実行する

docker compose run --rm front yarn test

これでjestによるテストが導入できました。

次からは実際にテストを書いていきたいなと思います。

インストール時に発生したエラー

１．error @jest/core@27.2.1: The engine "node" is incompatible with this module.

info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
error @jest/core@27.2.1: The engine "node" is incompatible with this module. Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.4.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

翻訳

info fsevents@2.3.2：プラットフォーム「linux」はこのモジュールと互換性がありません。
info "fsevents@2.3.2"はオプションの依存関係であり、互換性チェックに失敗しました。インストールから除外します。
info fsevents@1.2.13：プラットフォーム「linux」はこのモジュールと互換性がありません。
info "fsevents@1.2.13"はオプションの依存関係であり、互換性チェックに失敗しました。インストールから除外します。
エラー@jest / core @ 27.2.1：エンジン「ノード」はこのモジュールと互換性がありません。予想されるバージョン「^ 10.13.0 || ^ 12.13.0 || ^ 14.15.0 ||> = 15.0.0」。「14.4.0」を手に入れました
エラー互換性のないモジュールが見つかりました。
infoこのコマンドのドキュメントについては、https：//yarnpkg.com/en/docs/cli/addにアクセスしてください。

nodeモジュールが互換性がありませんと言われているのですが、nodoの定義をしているのが、dockerファイルで「dockerはよくわからないからいじりたくないな～」という気持ちからどうにか他の方法でいんすとーるできないかなと逃げてしまいました。

yarnがつかえないのかな？とかnpmにすればいける？などと意味わからない考えを巡らせて3時間ほど格闘しました。

しかしながら結局の所

エラー@jest / core @ 27.2.1：エンジン「ノード」はこのモジュールと互換性がありません。予想されるバージョン「^ 10.13.0 || ^ 12.13.0 || ^ 14.15.0 ||> = 15.0.0」。「14.4.0」を手に入れました

ここに書いてあるとおりノードモジュール君のやつは14.4.0だよ。ほかのやつなら互換性あるよと言われているので、

frontのdockerファイルのベースイメージを変更しました。

これですんなりインストールできたのでわからない事への逃げはよくないな。。。としみじみ感じました。精進しようと思います。

２．Error: Cannot find module 'babel-core'

babelcoreが見つからないと言われています。

yarn add -D babel-core@bridge

これで解決しました。

３．error Command failed with exit code 127.

https://hatolabo.com/programming/command-failed-code-127

このエラーが出てyarn start, npm run 出来ない場合、それは新しいモジュールを追加した後にyarn installしていないからです。

yarn installしなおせば解決します。

$ yarn install

この記事が気に入ったらサポートをしてみませんか？