Dockerを導入後に、テストコードが完全に使い物にならなくなった件について①

はじめに

先日、dockerとdocker-composeを開発環境に導入しました。起動はでき、問題なくアプリケーションは立ち上げることはできたのですが、テストでエラーが発生しまくりました。
現在、本件は未解決ですが、一旦状況を整理するためにもこちらでまとめます

[追記]解決策はこちらでまとめました！

前提

• テストの失敗は、結合テスト（SystemSpec）のみであり、その中で失敗は一部のものに限る。
• Capybara を使用

起きたエラーについて

失敗したテストは30件に上りますので、ここでは一部抜粋してご紹介します

1) Likes いいね機能 いいねできるとき ユーザは他ユーザの投稿にトップページからいいねできる
     Got 1 failure and 1 other error:

     1.1) Failure/Error:
            expect do
              #find('.practice_like').click
              find(".practice_like", match: :first) .click
              sleep 1
            end.to change { Like.count }.by(1)

            expected `Like.count` to have changed by 1, but was changed by 0

          [Screenshot]: /soccer_app/tmp/screenshots/failures_r_spec_example_groups_likes_nested_nested_ユーザは他ユーザの投稿にトップページからいいねできる_595.png


          # ./spec/system/likes_spec.rb:13:in `block (4 levels) in <top (required)>'

     1.2) Failure/Error: raise ActionController::RoutingError, "No route matches [#{env['REQUEST_METHOD']}] #{env['PATH_INFO'].inspect}"

          ActionController::RoutingError:
            No route matches [GET] "/practices/367/likes"


          [Screenshot]: /soccer_app/tmp/screenshots/failures_r_spec_example_groups_likes_nested_nested_ユーザは他ユーザの投稿にトップページからいいねできる_595.png

いろいろ書いてあるのですが、30件のエラー内容をよく分析すると以下のことがわかってきました。

• 失敗したテストのほとんどがJavascript(Ajax)が関わっていること
• テスト失敗時のスクリーンショットを見るとCSSが適用されてないこと

試したこと

おそらく、Javascriptを使用するためには何かしらの設定が必要なのだろうと仮説を立てて情報収集。
すると、こちらの記事を発見!!!
記事を参考に、以下のようにコードを書いてみる

capybara.rb

Capybara.register_driver :remote_chrome do |app|
  url = ENV['SELENIUM_DRIVER_URL']
  caps = ::Selenium::WebDriver::Remote::Capabilities.chrome(
    'goog:chromeOptions' => {
      'args' => [
        'no-sandbox',
        'headless',
        'disable-gpu',
        'window-size=1680,1050'
      ]
    }
  )
  Capybara::Selenium::Driver.new(app, browser: :remote, url: url, desired_capabilities: caps)
end

RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true ) do
    #driven_by :selenium_chrome_headless
    Capybara.server_host = IPSocket.getaddress(Socket.gethostname)
    Capybara.app_host = "http://#{Capybara.server_host}"
    driven_by :remote_chrome
  end
end

Gemfile

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers', require: !ENV['SELENIUM_DRIVER_URL']
end

Dockerfile

FROM ruby:2.6.5
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn

RUN apt-get install -y nodejs npm && npm install n -g && n 14.17.0

WORKDIR /soccer_app
COPY Gemfile /soccer_app/Gemfile
COPY Gemfile.lock /soccer_app/Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /soccer_app


RUN yarn install --check-files
RUN bundle exec rails webpacker:compile

docker-compose.yml

version: "3"
services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: "password"
    ports:
      - "4306:3306"

  web: &app_base
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/soccer_app
    ports:
      - "3000:3000"
    depends_on:
      - db
      - chrome
    stdin_open: true
    tty: true
    environment:
      BASIC_AUTH_USER: ${BASIC_AUTH_USER:-default}
      BASIC_AUTH_PASSWORD: ${BASIC_AUTH_PASSWORD-default}
      WEBPACKER_DEV_SERVER_HOST: webpacker
      BUNDLE_APP_CONFIG: ./.bundle
      SELENIUM_DRIVER_URL: http://chrome:4444/wd/hub

  webpacker:
    <<: *app_base
    command: bash -c "bundle exec bin/webpack-dev-server"
    depends_on:
      - web
    ports:
      - "3035:3035"
    tty: false
    stdin_open: false
    environment:
      BUNDLE_APP_CONFIG: ./.bundle
      NODE_ENV: development
      RAILS_ENV: development
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0

  chrome: #Chromeでのテスト実行用コンテナ
    image: selenium/standalone-chrome #Chromeがインストールされたイメージ
    ports:
      - "4444:4444"

volumes:
  db_data:

これで動くかな〜〜と淡い気持ちを抱きつつ、テストを動かすもやっぱりだめでした。
さて、他の記事もみてみようということでいろいろみていくと、、、
ここの神記事に全ての答えだ！と思われる記事が！！

なるほど、jsを使うテストでは、spec.rbのほうにjs: true とすればいいのか！！！ということで早速記述

spec/system/likes_spec.rb

require 'rails_helper'

RSpec.describe 'Likes', type: :system ,js: true do
  before do
    @user = FactoryBot.create(:user)
    @another = FactoryBot.create(:user)
    @practice = FactoryBot.create(:practice)
  end
  describe 'いいね機能' do
    context 'いいねできるとき' do
     #以下省略

これでどうだ！！！とコマンドを叩くと、、びっしりと赤い文字が。

terminal

% docker-compose run web bundle exec rspec

#以下、何も変わらない風景がそこにはありました

やはり、エラーをみてみると、例えばいいねボタンを押してもcreateアクションに飛んでいないような感じがあり、そのためModelの変化量とかが異なってきてエラーになっているとしか思えませんね、、、、、、

ん〜〜わからないな
この仮説ネタが切れた時からが辛いですね笑

一旦起動したアプリケーションでいいねの動作を確認すると、、うん大丈夫。（それはそう）

もう少し、ネット記事漁る必要がありそうです

おわりに

未解決で申し訳ないです。
どなたかお分かりの方いればコメント等でおしえてください！