Merge pull request #957 from huacnlee/add-assert-method-for-test

Add assert_react_component method for test react_component render result

Author: BookOfGreg

README.md

@@ -159,6 +159,35 @@ $ yarn add @types/react @types/react-dom
 
 Doing this will allow React-Rails to support the .tsx extension.
 
+### Test component
+
+You can use `assert_react_component` to test component render:
+
+app/views/welcome/index.html.erb
+
+```erb
+<%= react_component("HelloWorld", { greeting: "Hello from react-rails.", info: { name: "react-rails" } }, { class: "hello-world" }) %>
+```
+
+```rb
+class WelcomeControllerTest < ActionDispatch::IntegrationTest
+  test 'assert_react_component' do
+    get "/welcome"
+    assert_equal 200, response.status
+
+    # assert rendered react component and check the props
+    assert_react_component "HelloWorld" do |props|
+      assert_equal "Hello from react-rails.", props[:greeting]
+      assert_equal "react-rails", props[:info][:name]
+      assert_select "[class=?]", "hello-world"
+    end
+
+    # or just assert component rendered
+    assert_react_component "HelloWorld"
+  end
+end
+```
+
 ## Use with Asset Pipeline
 
 `react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by adding the `react-rails` gem:

lib/react-rails.rb

@@ -2,3 +2,9 @@
 require 'react/jsx'
 require 'react/rails'
 require 'react/server_rendering'
+
+module React
+  module Rails
+    autoload :TestHelper, 'react/rails/test_helper'
+  end
+end

lib/react/rails/railtie.rb

@@ -58,6 +58,7 @@ class Railtie < ::Rails::Railtie
 
         ActiveSupport.on_load(:action_view) do
           include ::React::Rails::ViewHelper
+          ActionDispatch::IntegrationTest.send(:include, React::Rails::TestHelper)
         end
       end
 

lib/react/rails/test_helper.rb

@@ -0,0 +1,26 @@
+module React
+  module Rails
+    module TestHelper
+      extend ActiveSupport::Concern
+
+      # assert react_component render
+      #
+      # assert_react_component("HelloWorld") do |props|
+      #   assert_equal "Hello world", props[:message]
+      # end
+      def assert_react_component(name)
+        assert_select "div[data-react-class]" do |dom|
+          assert_select "[data-react-class=?]", name
+
+          if block_given?
+            props = JSON.parse(dom.attr("data-react-props"))
+            props.deep_transform_keys! { |key| key.to_s.underscore }
+            props.deep_symbolize_keys!
+
+            yield(props)
+          end
+        end
+      end
+    end
+  end
+end

test/dummy_sprockets/app/views/pages/show.html.erb

@@ -4,7 +4,7 @@
 </ul>
 
 <div id='component-parent'>
-  <%= react_component 'GreetingMessage', { name: @name }, { id: 'component', prerender: @prerender } %>
+  <%= react_component 'GreetingMessage', { name: @name, last_name: "Last #{@name}", info: { name: @name } }, { id: 'component', class: "greeting-message", prerender: @prerender } %>
   <ul>
     <%= react_component 'Todo', { todo: 'Another Component' }, { id: 'todo', prerender: @prerender } %>
   </ul>

test/react/rails/test_helper_test.rb

@@ -0,0 +1,17 @@
+require 'test_helper'
+
+class TestHelperTest < ActionDispatch::IntegrationTest
+  test 'assert_react_component' do
+    get "/pages/1"
+    assert_equal 200, response.status
+    assert_react_component "GreetingMessage"
+    assert_react_component "GreetingMessage" do |props|
+      assert_equal "Bob", props[:name]
+      assert_equal "Last Bob", props[:last_name]
+      assert_equal "Bob", props[:info][:name]
+
+      assert_select "[id=?]", "component"
+      assert_select "[class=?]", "greeting-message"
+    end
+  end
+end