Mock a react hook with different return values

Question

I'd like to test a react component, which displays a list of element or not, based on the return value of a custom hook.

In my first test, I want to make sure nothing is displayed, so I used this at the top of my test method:

jest.mock('components/section/hooks/use-sections-overview', () => {
  return {
    useSectionsOverview: () => ({
      sections: [],
    }),
  };
});

in the second test, I want to display something, so I used this one

jest.mock('components/section/hooks/use-sections-overview', () => {
  return {
    useSectionsOverview: () => ({
      sections: [
         {id: '1', content: 'test'}
      ],
    }),
  };
});

Unfortunately, when running my test, it always returns an empty array.

I tried adding jest.restoreAllmocks(); in my afterEach method, but this doesn't change anything.

Am I missing something ?

craigw · Accepted Answer · 2023-02-06 16:33:44Z

1

jest.mock will always be pulled to the top of the file and executed first, so your tests can't change the mock beyond the initial one.

What you can do though is have the mock point at some kind of stubbed response, wrapped inside a jest.fn call (to defer execution), so it's evaluated after each change.

e.g.

const sections_stub = {
    sections: [],
};

jest.mock('components/section/hooks/use-sections-overview', () => ({
    useSectionsOverview: jest.fn(() => sections_stub),
}));

describe('my component', () => {
    it('test 1', () => {
         sections_stub.sections = [];

          // run your test
    });
    it('test 2', () => {
         sections_stub.sections = [
            { id: '1', content: 'test'}
         ];

          // run your other test
    });
});

answered Feb 6, 2023 at 16:33

craigw

7153 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Mock a react hook with different return values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related