Testing Javascript in a Rails application with Minitest

Question

I am making a Rails app with some of my views rendered in React, using the react-rails gem (so it's using the asset pipeline).

When I try to test my React views, the React components are not loaded, so I cannot test their content. For example, one of my integration tests look like this:

require 'test_helper'

class TabsIndexTest < ActionDispatch::IntegrationTest

  test "index" do
    get tabs_path
    assert_template 'tabs/index'
    assert_select 'table'
  end
end

This tests if this index page has a table element. It should, but the test is not loading my React element so it does not see one. (However, if I test for the presence of <div data-react-class=...>, that passes, letting me know the JS has not run).

Is there any way to get my React components to be visible to my Minitest tests?

You cannot test javascript with Minitest. I used Capybara with selenium, now it comes default in Rails 5.1. See guides.rubyonrails.org/testing.html#system-testing — Zia Qamar
– Zia Qamar, Commented Jan 25, 2018 at 10:18

Dan · Accepted Answer · 2018-03-27 22:26:42Z

1

I'd recommend not testing the components like this in a functional test.

many of the assert_'s are heading out of style in Rails. Really a controller test should only check for HTTP status codes (:ok, :not_found)

More info here: https://github.com/rails/rails/issues/18950

If you really want to test component in this way, you are able to use integration tests with capybara and something like headless chrome to execute the JS

Quick write up here: https://robots.thoughtbot.com/headless-feature-specs-with-chrome

I personally would recommend instead using JS unit tests and/or snapshots, which in my experience are quick and friendly:

https://facebook.github.io/jest/docs/en/tutorial-react.html https://facebook.github.io/jest/docs/en/snapshot-testing.html

answered Mar 27, 2018 at 22:26

Dan

1081 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

localhostdotdev · Accepted Answer · 2019-05-06 01:58:29Z

0

a very simple solution (instead of using jasmine etc.) was making those helpers:

  def assert_async_js_equal(expected, script)
    script = <<~SCRIPT
      done = arguments[arguments.length - 1];
      #{script}.then((result) => {
        done(result)
      })
    SCRIPT

    assert_equal(expected, page.evaluate_async_script(script), script)
  end

  def assert_js_equal(expected, script)
    assert_equal(expected, evaluate_script(script), script)
  end

then you can do:

assert_async_js_equal("your_value", "your.promise('code')")
assert_js_equal([1, 2, 3], "[1, 1 + 1, 2 + 1]")

answered May 6, 2019 at 1:58

localhostdotdev

1,90318 silver badges21 bronze badges

Collectives™ on Stack Overflow

Testing Javascript in a Rails application with Minitest

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related