React: I can't call findByType on an instance (react-test-renderer)

Created on 8 Aug 2018  ·  5Comments  ·  Source: facebook/react

Bug

What is the current behavior?
I can't call findByType() on an instance

    TypeError: instance.findByType is not a function

      140 |
      141 |         let instance = testRenderer.getInstance();
    > 142 |         let fieldMapper = instance.findByType(FieldMapper)

What is the expected behavior?
I want to get FieldMapper componen which is a child of FieldMapping

This is the peace of code from the test

        testRenderer = create(
            <Provider store={store}>
                <FieldMapping
                    setStage={(stage: number) => { }}
                    spDataProvider={null}
                    msFlowApprovalUrl=""
                ></FieldMapping>
            </Provider>
        );

        let instance = testRenderer.getInstance();
        let fieldMapper = instance.findByType(FieldMapper)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 15.6.2
react-test-renderer 15.6.2
Typescript 2.4.2
@types/react-test-renderer 16.0.0

Most helpful comment

We only have documentations for past versions starting with 16.0, sorry.

You can try looking here but it's likely missing test renderer because it was too new at that point, and not documented yet:
https://github.com/facebook/react/tree/15-stable/docs/docs

But in any case, test renderer didn't have any traversal API in 15.x. So finding something by type or otherwise traversing the hierarchy just can't be done in 15 without using private APIs like Enzyme did.

All 5 comments

Hey @aslanovsergey! You don't call findByType on the instance returned from testRenderer.getInstance, you call it on the root.

const root = testRenderer.root;
const fieldMapper = root.findByType(FieldMapper);

Here's an example.

It's a little confusing, but the getInstance method on the renderer doesn't return a "test instance". From the docs:

Return the instance corresponding to the root element, if available.

https://reactjs.org/docs/test-renderer.html#testrenderergetinstance

root provides you what you want

Returns the root “test instance” object that is useful for making assertions about specific nodes in the tree.

https://reactjs.org/docs/test-renderer.html#testrendererroot

Hope that helps!

Hi @aweary, the thing is that root is null :(

    TypeError: Cannot read property 'findByType' of undefined

      140 |
      141 |         let instance = testRenderer.root;
    > 142 |         let fieldMapper = instance.findByType(FieldMapper)

React 15 doesn’t provide this API.

Dan, please say how to get the documentation for a specific version of react? I couldn't find it out on my own

We only have documentations for past versions starting with 16.0, sorry.

You can try looking here but it's likely missing test renderer because it was too new at that point, and not documented yet:
https://github.com/facebook/react/tree/15-stable/docs/docs

But in any case, test renderer didn't have any traversal API in 15.x. So finding something by type or otherwise traversing the hierarchy just can't be done in 15 without using private APIs like Enzyme did.

Was this page helpful?
0 / 5 - 0 ratings