React (v16.14.0) Testing w/ Enzyme/Jest: Component state rendering data on fetch that is inside a useEffect

Question

I am having issue with testing a component that makes a fetch call inside a useEffect. What's happening is that, state is being updated but the component is not rendering the data from the fetch call that was set via the useEffect. It works fine the application is running, just not in the context of testing. Example below.

Functional Component

export const MyComponent: FunctionComponent = () => {

    const [data, setData] = useState([]); // <-- assume this is a list/array of numbers 1-20

    useEffect(() => {
       fetchData().then((response) => {
           setData(response)
       });
    }, []);

    return (
      <div id="the-data-list">
          { data?.length > 0 && data?.map((d) => (<span id=`the-data-${d}`>{ d }</span>)) }
      </div>
    );
}

Test Suite

describe('My Component Test Suite', () => {
    
    component = mount(<MyComponent />);

    it('should render the data', () => {
       const theData = component.find("#the-data-1").first();

       console.log(theData); <-- data is not rendered
    });

})

Odd thing is, putting a console.log right under where data is defined I can see that on the first render it's an empty []. On second render it has the data, but the data isn't rendered in the view. Any help or advice would be most appreciated.

Enzyme versions:

enzyme: 3.11.0
enzyme-adapter-react-16: 1.15.6

Does this answer your question? stackoverflow.com/questions/55388587/… — Lin Du
– Lin Du, Commented Sep 27, 2023 at 3:14

Joseph Freeman · Accepted Answer · 2023-10-06 14:50:41Z

0

So it turns out one of the reason why this didn't work for me is that the test data I was using was incorrect. It was an object instead of an array of object smh. I also added the usage of async and await. Below is the re-work of the example unit test suite.

describe('My Component Test Suite', () => {
    
    beforeAll(async () => {
        await act(async () => {
            component = mount(<MyComponent />);
        });
    });
    
    it('should render the data', async () => {
       const theData = component.find("#the-data-1").first();

       console.log(theData.debug()); <-- html is now rendered!!
    });
})

answered Oct 6, 2023 at 14:50

Joseph Freeman

1,8134 gold badges28 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

React (v16.14.0) Testing w/ Enzyme/Jest: Component state rendering data on fetch that is inside a useEffect

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related