見出し画像

RspecとJestを導入する

missi0415

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

ほか参考知識

FactoryBot

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

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

spec/ser_spec.rb

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

ただテストする


docker-compose run api bundle exec rspec

画像1

テスト項目が表示される

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

画像2

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でコンソールにログを出してあげると簡単に確認できます。

画像3

画像4

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 に以下を追加

画像5

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ディレクトリを作成

画像8

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

画像9

画像10

これで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ファイルのベースイメージを変更しました。

画像8

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

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

画像7

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


いいなと思ったら応援しよう！