React-rails: Using TestUtils in v2.4

[wrzasa]

How do I use TestUtils with react-rails v2.4? As far as I see TestUtils are no longer bundled in ReactAddons (removed from react-rails), but are available in ReactDOM. React manual states that to use TestUstils one must import/require react-dom/test-utils But how should I do it using react-rails?

[BookOfGreg]

Hi @wrzasa ,
You must be referring to this TestUtils, https://reactjs.org/docs/test-utils.html

How did you previously require that in your JS test suite?
ReactDom is available in react-rails 2.4 so you should be able to import ReactTestUtils from 'react-dom/test-utils'; anywhere in your test code for it to be available.

Edit: Thanks for asking about Testing, it's something that is missing from our docs/wiki, I'd very much welcome a PR to the readme or a new Wiki article on the subject if we work something out together 😄

[wrzasa]

Hi!
Thank you for your answer! Previously I just did: var TestUtils = React.addons.TestUtils. Now when trying to import ReactTestUtils from 'react-dom/test-utils'; and run jasmine specs in web browser I get in JS console: ReferenceError: require is not defined since import is translated to some code using require which is not available in web browser...

Edit: I'll be glad to provide a PR whenever we solve this problem ;-)

[BookOfGreg]

We are using Mocha with Webpack, and we have a test_helper.js include TestUtils like this among other things:

global.React = require('react');
global.Component = React.Component;
global.ReactDOM = require('react-dom');
global.TestUtils = require('react-dom/test-utils');

We have @rails/webpacker and mocha as dependencies in our package.json (Webpack tree-shakes away mocha for production)

We have a test/mocha.opts containing:

test/assets/javascript
--ui tdd
--reporter dot
--require test/babel
--require test/test_helper

Are you using Sprockets? Also not sure how Jasmine would normally expect you to require things in.
Hope the above info helps, that's how we have it working.

[wrzasa]

Well, yes I'm using sprockets. I have legacy Rails app still on Rails 4 so for now I will not be able to use webpack. Jasmine is no problem here, I use jasmine-rails gem and have spec/javascripts/helpers/spec_helper.js.jsx file to setup testing environment. That's where the TestUtils const/var should be created. But I don't know how it should be done while using rails assets (where I don't have to require anything, but also I have no require command).

[wrzasa]

I downgraded to 2.3.1, then fought with

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). in http://localhost:3000/assets/react-server.self-857bafe80cca2229eb9750a4b8396dd4ca9bea6760effc6dfd15c1a66996ca8c.js?body=1 (line 979)

for some time (but only in specs! widget in application worked correctly!), since app/assets/javascripts/server_rendering.js conveniently loaded react second time... finally after a few hours spent to make passing specs pass again on correctly working widget it all works.

So for rails4 and sprockets:

• if you have problems with duplicates of React in specs (but not in development), check your app/assets/javascripts/server_rendering.js
• I still don't know how to use v2.4 and Reatc's TestUtils (maybe it's not possible -- so its worth to mention it i README?).

[pioz]

@wrzasa i've same your problem... did you solve?

[wrzasa]

As I wrote above I downgraded to v2.3.1, made it work and forgot about using v2.4 with Rails 4, especially that -- as you can see here -- nobody really cares if it's even possible (I believe it's not)...

[BookOfGreg]

It works just fine for us, running a mocha test suite with v2.4 with Webpack, we did used to use Sprockets and it was fine then too. I do care, just there are no reproduction steps here that I can follow.

[wrzasa]

Steps to reproduce? Just try to answer the very first question: How should I import/require react-dom/test-utils using react-rails and sprockets where everything is automagically 'imported', but TestUtils is not? I provided quite a lot information about the problem. If its not enough maybe just try to

1. Create RoR4 application with sprockets
2. Install jasmine-rails
3. Install rect-rails
   and try to provide minimal working test using TestUtils.

[BookOfGreg]

@wrzasa My apologies, I mistook this for another open issue without re-reading the comments. I do plan on working on the testing documentation within react-rails. This is currently 4th on my queue.

[wrzasa]

Thanks! As I wrote I already found a workaround sufficient for myself, but let me know if I you need anything from me -- I will try to help when I can.

[colintsteele]

@wrzasa in your steps to reproduce, you don't actually need to install jasmine-rails - if you have some other way of getting Jasmine set up like my team does, you will still run into this issue.

Is TestUtils just namespaced differently in 2.4? I'm only able to access TestUtils anywhere inside the React namespace in 2.3.