React error when testing components that include refs

[Aman Dureja]

We have a React class that uses a ref property. It renders perfectly fine in our application and does not have any errors. However, when using Test from legit-tests to run unit tests, they all fail. If the ref property in the original file is commented out or removed, the tests run as expected. With the ref property intact, however, the following error occurs on all the tests:

This issue is reproduced when running unit tests using Test from legit-tests on any React components whose properties include refs. We are running React version 15.0.1.

[Zach Silveira]

Are you importing react at the top of the file? Legit tests add react as a
global already.
On Thu, May 5, 2016 at 13:44 Aman Dureja [e-mail] wrote:

We have a React class that uses a ref property. It renders perfectly fine
in our application and does not have any errors. However, when using Test
from legit-tests to run unit tests, they all fail. If the ref property in
the original file is commented out or removed, the tests run as expected.
With the ref property intact, however, the following error occurs on all
the tests:

[image: screen shot 2016-05-05 at 1 42 51 pm]
https://cloud.githubusercontent.com/assets/13455356/15051568/4c54dd42-12c7-11e6-8ce3-a481a3955761.png

This issue is reproduced when running unit tests using Test from
legit-tests on any React components whose properties include refs.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#41

[Aman Dureja]

We tried both importing React and not importing it. Both ways, the same error still occurs.

[Zach Silveira]

Are you running your app in development mode so that it shows errors? The only other thing I can think of is if you are rendering the component with refs as a child to the parent that you are testing, maybe. Are you shallow rendering? Really just shooting in the dark here. A code sample would help

[Aman Dureja]

The issue occurs whenever a ref is present anywhere in the component. Here is a sample of the code for the component that results in the error:

import React from 'react';
import ReactDOM from 'react-dom';

const InputField = React.createClass({
    render() {
        return (
            <div className='input' ref='input'/>
        );
    }
});

export default InputField;

And here is the code for the unit test:

import Test from 'legit-tests';
import InputField from 'forGit';

describe('Testing InputField', () => {

    it('Renders the component', () => {
        Test(<InputField/>);
    });

});

With the ref in the component, the error occurs. Without the ref there, the test succeeds.

The React version is 15.0.1, and the legit-tests version is 1.1.1.

Thank you for the help, it is really appreciated!

[Aman Dureja]

Hi there,

After some more experimenting, I figured out that Test() will render the component with a ref if shallow rendering is used:

Test(<InputField/>, {shallow: true});

However, while the component does render now, using the .find() function results in the following error:

Invariant Violation: findAllInRenderedTree(...): instance must be a composite component

Without being able to use .find(), we are unable to simulate events.

On the other hand, using regular rendering with ReactTestUtils works well, and allows for simulating events as expected. We would still like to use legit-tests however, so any more insight into this issue will be greatly appreciated.

Thank you!

[Zach Silveira]

I will look into it, but if you only need shallow rendering, try out
https://github.com/Legitcode/tests/tree/2.0

On Fri, May 6, 2016 at 11:35 AM Aman Dureja [e-mail]
wrote:

Hi there,

After some more experimenting, I figured out that Test() will render the
component with a ref if shallow rendering is used:

Test(, {shallow: true});

However, while the component does render now, using the .find() function
results in the following error:

Invariant Violation: findAllInRenderedTree(...): instance must be a composite component

Without being able to use .find(), we are unable to simulate events.

On the other hand, using regular rendering with ReactTestUtils works well,
and allows for simulating events as expected. We would still like to use
legit-tests however, so any more insight into this issue will be greatly
appreciated.

Thank you!

—
You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#41 (comment)