Jest Mock useStore with useShallow

[smo043]

Hello Team,

Since it’s recommended to use useShallow with V5, we’re encountering an issue with our unit test coverage. The code within useShallow isn’t being captured by Jest. Any assistance would be greatly appreciated.

import { useShallow } from 'zustand/react/shallow';

import {useStore} from './useStore';

const [searchValue, setSearchValue] = useStore(
  useShallow((state) => [state.searchValue, state.setSearchValue]),
)

Test

import { useShallow } from 'zustand/react/shallow';

import {useStore} from './useStore'(

jest.mock("./useStore", ()=> ({useStore: jest.fn()}));

jest.mock("zustand/react/shallow", () => useShallow: jest.fn()}));

[dbritto-dev]

@smo043 you shouldn't mock useShallow. BTW, we updated the testing guide to export anything from zustand by default.

[smo043]

The zustand test mock from the documentation helped fixing the reported issue.

[obryckim]

@smo043

Could you post the code for your full solution for solving this issue?

• Are you still mocking useStore in your test? (jest.mock("./useStore", ()=> ({useStore: jest.fn()}));)
• What does the test file look like now?
• What does the mock for zustand look like and where does it live?
• etc.

Thanks!

[dbritto-dev]

@obryckim the latest version of testing guide should be enough

[smo043]

Hello @obryckim

I have followed the setup provided by zustand and here is an example:

https://zustand.docs.pmnd.rs/guides/testing#jest

describe('<Component />', () => {
  const initialStoreState = useStore.getState();

  beforeEach(() => {
    useStore.setState(initialStoreState, true);
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('renders page with given name', () => {
    const MOCK_CONTENT = { name: 'test name' };
    useStore.setState(MOCK_ CONTENT);

    render(<Section />);
    
expect('test name').toBeInTheDocument();
  });
});

@dbritto-dev - pls confirm if this approach is correct.

[dbritto-dev]

@smo043 this part is not needed if you are following testing guide

 beforeEach(() => {
    useStore.setState(initialStoreState, true);
  });