jeudi 14 janvier 2021

React testing shallow snapshots problem with prop

I have problem with testing react component that has some HOC around it. This is the end of this component:

export default withSocket(withServerConfiguration(Component));

I would like to test it by first of all creating its snapshot so I did it this way:

const wrapper = (props) =>
    shallow(
        <Provider store={store}>
            <Component{...props} />
        </Provider>
    )
        .dive()
        .dive()
        .dive()
        .dive();

I had to do dive() for so many times because I had to go through all HOC components around it to get correct snapshot with all DOM elements.

I did it this way:

 it("renders correctly without error", () => {
        expect(toJson(wrapper())).toMatchSnapshot();
    });

and it works correctly. The problem is when I want to pass a prop to that component. It looks like in some way it is overridden by one of the HOC component. I am passing props like this:

 const wrapper = shallow(
            <Provider store={store}>
                <Component propName= />
            </Provider>
        )
            .dive()
            .dive()
            .dive()
            .dive();

but in the end I get error from one of the HOC components that propName value is null. What can be wrong here? How can I test components like this? Maybe I should use renderer method or mount?

Aucun commentaire:

Enregistrer un commentaire