What is wrong with react-testing-library render function? It returns an error on certain objects

Question

Using: "@testing-library/react": "^9.1.4",

If I call:

render({component})

Where component is:

{ '$$typeof': Symbol(react.element),
        type:
         { mapStateToProps: [Function],
           mapDispatchToProps: [Function: mapDispatchToProps],
           reactComponent: { [Function: WithHandlers] displayName: 'withHandlers(lifecycle(Component))' },
           mockDispatch:
            { [Function: mockConstructor]
              _isMockFunction: true,
              getMockImplementation: [Function],
              mock: [Getter/Setter],
              mockClear: [Function],
              mockReset: [Function],
              mockReturnValueOnce: [Function],
              mockReturnValue: [Function],
              mockImplementationOnce: [Function],
              mockImplementation: [Function],
              mockReturnThis: [Function],
              mockRestore: [Function] } },
        key: null,
        ref: null,
        props: {},
        _owner: null,
        _store: {} }

I get this error:

console.error node_modules/react/cjs/react.development.js:172 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

If I render this component there is no error:

{ '$$typeof': Symbol(react.element),
        type: [Function],
        key: null,
        ref: null,
        props: {},
        _owner: null,
        _store: {} }

They both appear to be react.elements and https://testing-library.com/docs/react-testing-library/api implies this is what it expects.

What have I done wrong?

skovy · Accepted Answer · 2019-09-16 18:16:45Z

1

You're calling render({component}), according to the docs the input should be React.ReactElement<any>.

Have you tried render(component)?

answered Sep 16, 2019 at 18:16

skovy

5,6502 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mattb Over a year ago

thanks for the comment, looks like I lost some formatting on my orginal post, I'm calling render like this: render(<Provider store={store}>{component}</Provider>) Where {component} is passed to the function Does my console output of Symbol(react.element) not show its a React.ReactElement<any> ?

skovy Over a year ago

Can you provide the full source of the test?

mattb Over a year ago

if you check stackoverflow.com/questions/57959972/… I gave the full detail, I just thought it was a bit too long winded for anyone to read!

codeshinobi · Accepted Answer · 2022-02-11 10:24:37Z

0

I solved it by doing the following:

expect(() =>
        render(
            <MyFormModal
                recordDetailView={<MyFormEditView />}
                addRecord={(record: any) => addMyRecord(record)}
            />,
            {
                wrapper: () => <MyAppWrapperWithRedux store={store} />,
            }
        )
    ).not.toThrow();

The render() function in RTL takes a second parameter where you can specify your wrapper that connects to the redux store. Ofcourse, this is assuming your issue was caused by a wrapping component, and that you are using redux.

answered Feb 11, 2022 at 10:24

codeshinobi

11412 bronze badges

Collectives™ on Stack Overflow

What is wrong with react-testing-library render function? It returns an error on certain objects

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related