I have been attempting to mock a named imported function in a NextJS page, but so far all my efforts from various sources have been unsuccessful.
I tried to replicate this by using create-next-app with --example with-jest and minimal code as shown below:
In my pages/index.tsx:
import Head from 'next/head'
import { hello } from '../utils/greeter'
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
</Head>
<main>
<h1>{hello()}</h1>
</main>
</div>
)
}
The utils/greeter.ts file contains the named function I wish to mock/spyOn in the test cases:
export const hello = (): string => 'hello world';
Now, moving on to the test file __tests__/index.test.tsx:
import { render, screen } from '@testing-library/react'
import Home from '@/pages/index'
describe('Home', () => {
it('renders unmocked greeting', () => {
render(<Home />)
const heading = screen.getByRole('heading', {
name: 'hello world',
})
expect(heading).toBeInTheDocument()
})
it('renders mocked greeting', () => {
render(<Home />)
const heading = screen.getByRole('heading', {
name: 'hello mock',
})
expect(heading).toBeInTheDocument()
})
})
To change the mock implementation, add the following above the test cases:
jest.mock('../utils/greeter', () => ({
__esModule: true,
hello: () => 'hello mock'
})
This will modify the function correctly and make the second test case pass. However, the mock persists for all test cases, causing the first test case to fail.
I would like the ability to choose whether to use the real implementation or a mock implementation for each test case, and even utilize a spy for verification purposes.
Every time I attempt to replace the 'hello mock' string with a reference, such as
const mockFn = jest.fn()
And then try to override the return value in each test case, e.g.
mockFn.mockReturnValue('hello mock')
Both tests fail because it seems the hello() function is not returning the mocked values.
Suggestions have been made to use jest.spyOn(..), but since the function is not part of an object, I am encountering type errors with this approach.
If anyone can provide guidance on where I might be misunderstanding the jest mocking process or going wrong, it would be greatly appreciated!