Add assert_react_component method for test react_component render result

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 installing:

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

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 installing:

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

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 installing:

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

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 installing:

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

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 installing:

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

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 installing:

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

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 installing:

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

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 installing:

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