Merge pull request #692 from reactjs/fix-console-replay-state

fix(console_replay) clear state between renders

Author: rmosolgo

lib/react/server_rendering/bundle_renderer.rb

@@ -13,6 +13,7 @@ class BundleRenderer < ExecJSRenderer
       # Reimplement console methods for replaying on the client
       CONSOLE_POLYFILL = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/console_polyfill.js"))
       CONSOLE_REPLAY   = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/console_replay.js"))
+      CONSOLE_RESET    = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/console_reset.js"))
       TIMEOUT_POLYFILL = File.read(File.join(File.dirname(__FILE__), "bundle_renderer/timeout_polyfill.js"))
 
       def initialize(options={})
@@ -39,6 +40,10 @@ def render(component_name, props, prerender_options)
         super(component_name, t_props, t_options)
       end
 
+      def before_render(component_name, props, prerender_options)
+        @replay_console ? CONSOLE_RESET : ""
+      end
+
       def after_render(component_name, props, prerender_options)
         @replay_console ? CONSOLE_REPLAY : ""
       end

lib/react/server_rendering/bundle_renderer/console_reset.js

@@ -0,0 +1,3 @@
+if (typeof console !== "undefined" && console.history) {
+  console.history = [];
+}

test/dummy/app/assets/javascripts/components/TodoList.js.jsx

@@ -6,6 +6,7 @@ TodoList = React.createClass({
     this.setState({mounted: 'yep'});
   },
   render: function() {
+    console.log("Test Console Replay")
     return (
       <ul>
         <li id='status'>{this.state.mounted}</li>

test/react/server_rendering/console_replay_test.rb

@@ -0,0 +1,25 @@
+require "test_helper"
+
+if WebpackerHelpers.available? || SprocketsHelpers.available?
+  class ConsoleReplayTest < ActionDispatch::IntegrationTest
+    setup do
+      WebpackerHelpers.compile
+      React::ServerRendering.renderer_options = {replay_console: true}
+      React::ServerRendering.reset_pool
+    end
+
+    EXPECTED_REPLAY = <<-HTML
+<script class="react-rails-console-replay">
+console.log.apply(console, ["Test Console Replay"]);
+</script>
+    HTML
+
+    test "it clears the state between each request" do
+      # Each request should only contain one log:
+      get '/server/1'
+      assert_includes(response.body, EXPECTED_REPLAY)
+      get '/server/1'
+      assert_includes(response.body, EXPECTED_REPLAY)
+    end
+  end
+end