I have this login form in react:
`
const LoginPage = () => {
const [error, setError] = useState<string | null>(null);
const router = useRouter()
const {
handleSubmit,
register,
reset
} = useForm<LoginFormData>()
const onSubmit: SubmitHandler<LoginFormData> = async (data) => {
const response = await signIn('credentials', {
...data,
redirect: false,
})
if (response && response.ok) {
setError(null)
reset()
router.replace('/billboard')
return
}
if (response && response.error) setError(response.error)
}
return (
<div>
<Image
src='/images/logo.png'
alt="hero"
width={160} height={160}
className='absolute z-20 top-5 left-5'
/>
{!!error && <p>
<AiOutlineFire /> {error}
</p>}
<form
onSubmit={handleSubmit(onSubmit)}>
<h2 className="text-2xl font-semibold">Login</h2>
<div>
<input
type="text" {...register('email')}
aria-label='email'
placeholder="Email address or phone number"
/>
<input
type="password" {...register('password')}
aria-label='password'
placeholder="Password"
/>
</div>
<div>
<button
type="submit" aria-label='submit'>
Login
</button>
<div>
<FcGoogle
size={35}
/>
<VscGithub
size={35}
/>
</div>
<p>
<span>First time using Netflix? </span>
<Link href='/auth/signup' className="font-bold">
Create a Netflix account.
</Link>
</p>
</div>
</form>
</div>
);
}
export default LoginPage;
And I want to test login authentication in my fron-end testing. Here is the test code:
import { render, screen } from '@testing-library/react'
import LoginPage from './LoginPage'
import userEvent from '@testing-library/user-event'
vi.mock('next/router', () => require('next-router-mock'))
vi.mock('next-auth/react', () => ({
signIn: vi.fn()
}))
vi.spyOn(require('next-auth/react'), 'signIn')
describe('LoginPage', async () => {
beforeEach(() => vi.clearAllMocks())
it('should submit a non existing email', async () => {
const signIn = vi.fn()
render(<LoginPage />)
const emailInput = screen.getByLabelText('email')
const passwordInput = screen.getByLabelText('password')
const submitButton = screen.getByLabelText('submit')
const email = 'anderson@gmail'
const password = 'password123'
await userEvent.type(emailInput, email)
await userEvent.type(passwordInput, password)
await userEvent.click(submitButton)
expect(signIn).toHaveBeenCalledWith('credentials', {
email, password,
redirect: false,
})
})
})
Here is the output:
src/common/components/pages/LoginPage/LoginPage.test.tsx > LoginPage > should submit a non existing email
AssertionError: expected "spy" to be called with arguments: [ 'credentials', …(1) ]
Received:
Number of calls: 0
❯ src/common/components/pages/LoginPage/LoginPage.test.tsx:32:24
30| await userEvent.click(submitButton)
31|
32| expect(signIn).toHaveBeenCalledWith('credentials', {
| ^
33| email, password,
34| redirect: false,
I want to check if the signIn function from next-auth was called, so I can keep wring the rest of the test script. I have searched throughout the internet for a problem like this, but it seems that no solution works. Most of the solutions out there are all about Jest, and I’m using vitest, altough vitest and jest are pretty much the same.
