はじめに

Capybaraでのテストで、JavaScriptが作動する処理をする場合には少し設定を変える必要があります。
今回は簡単な例としてクリックするとテキストが変わる処理についてテストしてみます。

railsのバージョンは5.2.3を使用しています。

設定

まずはCapybaraを導入する必要がありますが、わからない方は過去に書いたこちらの記事を参照してください。

続いてhelperファイルに追記します。

spec_helper.rb

# 最後の行に追加
ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
Capybara.javascript_driver = :selenium_chrome_headless

※ なぜかjavascript_driverにwebkitを使うとうまくいきませんでした…
　詳しい方いたらコメントいただけると助かります。

テストファイル

spec/featuresの下にファイルを用意します。

sample_spec.rb

require 'rails_helper'

feature 'post', type: :feature do

  scenario 'jsが動作すること', js: true do
    # クリックの表示が存在する
    visit root_path
    expect(page).to have_content('クリック')

    # クリックの文字をクリックするとOKになる
    find('.js-class').click
    expect(page).to have_text("OK")
  end
end

jsを動作させたい場合は上述のようにscenarioの行にjs: trueを追記する必要があります。

念のためviewファイルとjsファイルも載せておきます。
（HamlとjQueryを使ってます）

index.html.haml

.header
  = link_to "トップページ", root_path
.js-class
  クリック

sample.js

$(function(){
  $(".js-class").on("click", function() {
    $(this).text("OK");
  })
})

テスト実行

あとはターミナルから実行するだけです。

ターミナル

$ bundle exec rspec spec/features/sample_spec.rb

うまくテストが通ってます。