@@ -135,7 +135,7 @@ stages:
   # `rake hyperstack:matrix:check` fails if this list and the table disagree. (#51)
   parallel:
     matrix:
-      - HYPERSTACK_CELL: [rails61-react16]
+      - HYPERSTACK_CELL: [rails61-react16, rails61-react17]
 
   before_script:
     # - sudo sed -i -e '/local.*peer/s/postgres/all/' -e 's/peer\|md5/trust/g' /etc/postgresql/*/main/pg_hba.conf
@@ -196,7 +196,7 @@ stages:
   # `rake hyperstack:matrix:check` fails if this list and the table disagree. (#51)
   parallel:
     matrix:
-      - HYPERSTACK_CELL: [rails61-react16]
+      - HYPERSTACK_CELL: [rails61-react16, rails61-react17]
 
 #  language: ruby
 #  cache:
 
@@ -163,7 +163,16 @@ def self.get_info
         end
       end
       expect_evaluate_ruby('Foo.get_error').to eq('ErrorFoo Error')
-      expect_evaluate_ruby('Foo.get_info').to eq("\n    in ErrorFoo (created by Foo)\n    in div (created by Foo)\n    in Foo (created by Hyperstack::Internal::Component::TopLevelRailsComponent)\n    in Hyperstack::Internal::Component::TopLevelRailsComponent")
+      # React 17 replaced the synthetic component stack ("in Foo (created by Bar)")
+      # with native error frames, which name files rather than components. What the
+      # callback guarantees on every version is that it receives a non-empty
+      # componentStack; only React <= 16 can be asserted component by component. (#51)
+      expect_evaluate_ruby('Foo.get_info.is_a?(String) && !Foo.get_info.empty?').to be_truthy
+      if react_version_major <= 16
+        expect_evaluate_ruby('Foo.get_info').to eq("\n    in ErrorFoo (created by Foo)\n    in div (created by Foo)\n    in Foo (created by Hyperstack::Internal::Component::TopLevelRailsComponent)\n    in Hyperstack::Internal::Component::TopLevelRailsComponent")
+      else
+        expect_evaluate_ruby('Foo.get_info').to match(/ErrorFoo|at eval|factory\.js/)
+      end
     end
   end
 
@@ -546,7 +555,7 @@ class Lorem; end
           end
           Hyperstack::Component::ReactTestUtils.render_component_into_document(Foo, bar: 10, lorem: Lorem.new)
         end
-        expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        expect(console_messages)
           .to match(/Warning: Failed prop( type|Type): In component `Foo`\nRequired prop `foo` was not specified\nProvided prop `bar` could not be converted to String/)
       end
 
@@ -564,7 +573,7 @@ class Lorem; end
           end
           Hyperstack::Component::ReactTestUtils.render_component_into_document(Foo, foo: 10, bar: '10', lorem: Lorem.new)
         end
-        expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n")).to_not match(/prop/)
+        expect(console_messages).to_not match(/prop/)
       end
     end
 
@@ -616,7 +625,7 @@ class Foo < Hyperloop::Component
           render { Foo }
         end
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/did you mean to say Foo()/)
     end
   end
 
@@ -125,7 +125,7 @@ class Foo < Hyperloop::Component
       end
     end
     expect(page.body[-60..-19]).to include('<div>12-string</div>')
-    expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+    expect(console_messages)
           .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo1` could not be converted to String/)
   end
 
@@ -155,7 +155,7 @@ class Foo2 < Hyperloop::Component
 
       Hyperstack::Component::ReactTestUtils.render_component_into_document(Foo2, bar: 10, lorem: Lorem.new)
     end
-    expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+    expect(console_messages)
       .to match(/Warning: Failed prop( type|Type): In component `Foo2`\nRequired prop `foo` was not specified\nProvided prop `bar` could not be converted to String/)
   end
 
@@ -191,7 +191,7 @@ class Foo < Hyperloop::Component
           param :bar, type: []
         end
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to Array/)
     end
 
@@ -202,7 +202,7 @@ class Foo < Hyperloop::Component
           param :bar, type: [String]
         end
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo`\[0\] could not be converted to String/)
     end
 
@@ -227,7 +227,7 @@ def self._react_param_conversion(json, validate_only)
         end
       end
       expect(page.body[-60..-19]).to include('<span>1, 2</span>')
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle/)
     end
 
 
@@ -49,7 +49,7 @@ def setup
         element = Hyperstack::Component::ReactAPI.create_element(Foo).on(:foo_submit) { 'bar' }
         Hyperstack::Component::ReactTestUtils.render_into_document(element)
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to_not match(/Exception raised/)
     end
 
@@ -73,7 +73,7 @@ def setup
         element = Hyperstack::Component::ReactAPI.create_element(Foo).on(:foo_invoked) { [[1, 2, 3], 'bar'] }
         Hyperstack::Component::ReactTestUtils.render_into_document(element)
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to_not match(/Exception raised/)
     end
   end
@@ -199,7 +199,7 @@ class Foo < Hyperloop::Component
       end
     end
     expect(page.body[-60..-19]).to include('<div>12-string</div>')
-    expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+    expect(console_messages)
           .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo1` could not be converted to String/)
   end
 
@@ -216,7 +216,7 @@ class Foo2 < Hyperloop::Component
 
       Hyperstack::Component::ReactTestUtils.render_component_into_document(Foo2, bar: 10, lorem: Lorem.new)
     end
-    expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+    expect(console_messages)
       .to match(/Warning: Failed prop( type|Type): In component `Foo2`\nRequired prop `foo` was not specified\nProvided prop `bar` could not be converted to String/)
   end
 
@@ -254,7 +254,7 @@ class Foo < Hyperloop::Component
           param :bar, type: []
         end
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to Array/)
     end
 
@@ -265,7 +265,7 @@ class Foo < Hyperloop::Component
           param :bar, type: [String]
         end
       end
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo`\[0\] could not be converted to String/)
     end
 
@@ -290,7 +290,7 @@ def self._react_param_conversion(json, validate_only)
         end
       end
       expect(page.body[-60..-19]).to include('<span>1, 2</span>')
-      expect(page.driver.browser.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      expect(console_messages)
         .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle/)
     end
 
 
@@ -90,3 +90,38 @@ class JavaScriptError < StandardError; end
 #     end
 #   end
 # end
+
+# React <= 16 interpolated its warnings before handing them to console.error, so
+# Chrome captured one readable sentence. React 17 passes the *format string* and
+# its arguments separately instead:
+#
+#   "Warning: Failed %s type: %s%s"  "prop"  "In component `Foo` ..."  " at eval ..."
+#
+# Same information, different shape. Re-interpolating here lets the assertions be
+# written once, against the readable form, on either React version -- rather than
+# teaching every expectation about both. (#51)
+def console_messages
+  page.driver.browser.logs.get(:browser)
+      .map { |m| expand_console_format(m.message.gsub(/\\n/, "\n")) }
+      .to_a.join("\n")
+end
+
+def expand_console_format(message)
+  return message unless message.include?('%s')
+
+  segments = message.scan(/"((?:[^"\\]|\\.)*)"/m).flatten
+  return message if segments.size < 2
+
+  format_str, *args = segments
+  expanded = format_str.dup
+  args.each { |arg| expanded = expanded.sub('%s', arg) }
+  "#{message.split('"').first}#{expanded}"
+end
+
+# The React the browser actually loaded. Which React a cell gets is decided by
+# react-rails (2.x bundles 16.x, 2.7.x bundles 17.0.2, 3.3 bundles 18.2) or, on
+# the esbuild pipeline, by npm -- so asking the page is the only reliable answer.
+# Used where React changed observable behaviour rather than API. (#51)
+def react_version_major
+  @react_version_major ||= evaluate_ruby('`React.version`').to_s.split('.').first.to_i
+end
@@ -32,3 +32,18 @@ cells:
     pipeline:    sprockets
     react:       "16.14"   # derived: bundled by react-rails 2.x
     env: {}                # the gemspec defaults already describe this cell
+
+  # React 17 takes the SAME hyper-component code path as 16 -- neither has
+  # ReactDOM.createRoot, so both use ReactDOM.render/findDOMNode. So this cell is
+  # not about new component code: it covers the react-rails 2.7 integration,
+  # which edge's default pin (`< 2.7.0`) deliberately excludes. Costs no code
+  # change, only a version selection. (#51)
+  - id: rails61-react17
+    ruby:        "3.4"
+    rails:       "6.1"
+    opal:        "1.8"
+    react_rails: "2.7"
+    pipeline:    sprockets
+    react:       "17.0.2"  # derived: bundled by react-rails 2.7.x
+    env:
+      REACT_RAILS_VERSION: "~> 2.7.1"