reactjs - How can I fix the Jest test to find (render) the node in order to .simulate("click") when ThemeProvider is used from react jss?

Question

This is a very simple question but I just could not figure it out. I am trying to run a very basic test on Jest on a component but I get the following error:

Method “simulate” is meant to be run on 1 node. 0 found instead.

Here is how the test is written:

const theme = {
    palette: {
        primary: "#f5f5f5",
        secondary: "#2b4450",
        tertiary: "#871111"
    },
    spacing: ["0px", "4px", "8px", "16px", "32px", "64px"],
}; 

 const wrapper = shallow(<ThemeProvider theme={theme}>
 <MonthPicker //other props passed in />
  </ThemeProvider>);
    
        test("renders correct heading that changes with next/previous", () => {
        wrapper.find('#button-next').simulate('click');
        expect(mockSetDateObject).toHaveBeenCalled();
    
        wrapper.find('#button-previous').simulate('click');
        expect(mockSetDateObject).toHaveBeenCalled();
    
        const h2 = wrapper.find('#month-label').text();
        expect(h2).toEqual("January 2021");
    
        expect(toJson(wrapper)).toMatchSnapshot();
    });

The tests worked perfectly before ThemeProvider was added to the code and the test will throw an error if I remove it and the theme passed in to it. I am not sure if this error is occurring due to shallow testing or am I missing a step before .find()? Any help would be much appreciated.

question from:https://stackoverflow.com/questions/66063143/how-can-i-fix-the-jest-test-to-find-render-the-node-in-order-to-simulatecli

Answer 1

Waitting for answers