Sometimes you are testing a component and need to mock a module (in this case I needed to mock a zustand store), but with the exemple of "next/navigation" mock, you are mocking the module for entire test suit on the file that you declare the jest.mock(). But, if you want to mock a specific implementation for each test? So first, with need to declare the module mock, without pass the implementation function:
jest.mock('../../stores/sounds-state-store')In this case we are mocking "../../stores/sounds-state-store" module
And, inside each test, we will use the jest.Mock.mockImplementation() function to mock the implementation of module inside it/test scope:
the store we want to mock is useSoundsStateStore, from '../../stores/sounds-state-store'
useSoundsStateStore.mockImplementation(
() =>
[{ active: true, id: 'd4ad48e', loaded: true, volume: 1 }] as SoundState[]
)Full code:
// other imports...
import { SoundState, useSoundsStateStore } from '../../stores/sounds-state-store'
jest.mock('../../stores/sounds-state-store')
describe('Clear Button', () => {
// tests...
it('should not be disabled', async () => {
;(useSoundsStateStore as unknown as jest.Mock).mockImplementation(
() =>
[
{ active: true, id: 'd4ad48e', loaded: true, volume: 1 }
] as SoundState[]
)
render(<ClearButton />)
const button = await screen.findByRole('button', { name: /clear/i })
expect(button.getAttribute('disabled')).toBeNull()
})
// tests...
})Note that we use:
;(useSoundsStateStore as unknown as jest.Mock).mockImplementation()instead of:
useSoundsStateStore.mockImplementation()Because it's a typescript project, and we need to tell the ts compiler that useSoundsStateStore have jest.Mock functions on this scope.
references: