前提

Ruby On Railsプロジェクト内vue.jsでフロントエンドを賄っています。Capybaraでfeatueテストをする時、値がうまく取れずにコケた話です。

問題

ajaxを使い、並び順等を非同期で変更できるようなtableを持つページに対してテストを書こうとしました。しかし、値をall()やfind()で取得しようとしても、find("hoge").textや.valueの値は""の空の文字列が帰ってきて、テストは失敗します。
binding.pryをテスト中に挟んだところ、formが上手く描画しきれてないような気がしました。formのvalueがresource.idであったり、resource.titleのままだったので、vue.jsが走る前の状態なんだなと言うことはわかります。ググっていくうちに、JavaScriptがそもそも動いていない、もしくはCapybaraがデフォルトでJavaScriptをテストできないのでは？と思い始めました。

解決

初めにjs: trueを記述してあげれば、JavaScriptを使用する者に対しても、テストが実行できるようになります。ちなみに、chromeが入っていないとエラー出るので入れておきましょう。(私はVivaldiしか入っていなかった..)

describe "HogePage", type: :feature, js: true do

...

end

余談

とても時間を使ってしまいましたが、単純な知識不足。原因にあたりをつけるために、save_and_open_pageメソッドが役立ちました。これは、テスト中に挟むことで、その時のhtmlをブラウザで開いてくれます。今回ではformのtbody部分が<script>タグで囲まれていて未実行状態のような感じだったので、あたりをつけられました。以上。