12
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】Capybaraを使った統合テスト(導入〜簡単なテスト実行まで)

Posted at

はじめに

統合テストとはアプリ上で意図したとおりの動作をしてくれるかを確認するテストのことです。
ブラウザ上で自分で行なっても良いですが、テストコードを書くことで大きなメリットがあるのでできれば書いておくと良いかと思います。

メリット
・一度コードを書いてしまえばテストが簡単にできる
(テストコードがないとフォームの入力やリンクの移動など毎回行なう必要がある)
・思考を整理できる
 書き下ろすことで自分の思考を客観視でき、抜け漏れに気付きやすくなる
・記録として残せる
 アプリの動作を自分がどこまで想定しているか見返すことができる
 また、第3者がテスト内容を用意に確認できる

今回は以下のGIFファイルのように、投稿する動作がうまく行くかどうか確認してみようと思います。
e02d69df1a47ecac2b896cfeb09626d2.gif

Capybara導入

まずはCapybaraというgemを導入します。

Gemfile
group :test, :development do
  # (省略)
  gem 'capybara'
end

※ このときtest環境の中にcapybaraが既に入っている可能性があるので、そのときはコメントアウトしておきましょう。rails5.2.3では入ってました。

ターミナル
$ bundle install
spec/rails_helper.rb
# 以下の記述を追加
require 'capybara/rspec'

次に作業ファイルを用意します。
spec/featuresディレクトリを作成しましょう。
その中にテスト用のファイルを作成します。
今回はpost_spec.rbとします。

テストコード

post_spec.rbに記述していきます。

spec/features/post_spec.rb
require 'rails_helper'

feature 'post', type: :feature do
  scenario '投稿ができること' do
    # 投稿ボタンが存在する
    visit root_path
    expect(page).to have_content('投稿')

    # 投稿処理が動作する
    expect {
      click_link('投稿')
      expect(current_path).to eq new_post_path
      fill_in 'post_content', with: 'こんにちは'
      fill_in 'post_tags_attributes_0_content', with: 'タグ'
      find('input[type="submit"]').click
    }.to change(Post, :count).by(1)

    # トップページにリダイレクトされる
    expect(current_path).to eq root_path

    # 投稿内容がトップページに表示されている
    expect(page).to have_content('こんにちは')
  end
end

一連の動作をsenario do 〜 endの間に記述します。

今回は投稿のリンクが表示されていることを確認し、投稿処理確認、リダイレクトの確認、投稿内容の表示確認を順番に行なっています。
visitで指定のパスへ移動、fill_inでフォームに入力、findやclickで投稿など各処理の詳細はここでは説明しませんが、調べると出てくるので自分がやりたい処理があれば探してみましょう。

こちらのチートシートにcapybaraで使えるものが一通り書かれているので参考にしてみると良いかもしれません。

テスト実行

テストの実行は以下のようにファイルを指定して実行すると良いです。

ターミナル
$ bundle exec rspec spec/features/post_spec.rb

spec以下で実行したいファイルを指定します。
今回はfeaturesディレクトリのpost_spec.rbにテストコードを書いたので上のようになります。

では実行してみます。

12172459f80a1f0c542410796c6829fe.png 上のように表示されれば無事クリアしています。
12
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?