Testing a component that uses context - reactjs

Question

I'm trying to write tests for the Login component of my app, and want to test that the user can enter email and password fields, then submit them. There are two complications: it has a to another component, and it uses context to import a function called loginUser. The first problem I solve by making a custom renderWithRouter function, but I can't solve the second problem because the component isn't able to consume the loginUser function outside of context. I get this error: Error: Uncaught [TypeError: Cannot read property 'then' of undefined] because loginUser is undefined. Any idea how I can solve this? Here is Login.tsx:
import React, { useState } from 'react';
import { useAuth } from 'context/authContext'
import { useHistory, Link } from 'react-router-dom'
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button'
export const Login = (props: any) => {
const { setUser, loginUser } = useAuth()
const [email, setEmail] = useState<string>();
const [password, setPassword] = useState<string>();
const [errors, setErrors] = useState<boolean>()
const history = useHistory()
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
loginUser({
email,
password
}).then((result: any) => {
console.log(result)
if (result.message === 'login error') {
setErrors(true)
} else {
history.push('/dashboard/home')
}
})
}
return(
<div className="login-wrapper">
<h1>Please Log In</h1>
<div className='form-wrapper'>
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
isInvalid={errors ? true : false}
type="email"
placeholder="Enter email"
onChange={e => setEmail(e.target.value)}/>
<Form.Control.Feedback type="invalid">
{errors ? 'either you don\'t have an account or the email and password do not match' : null}
</Form.Control.Feedback>
<Form.Text className="text-muted">
umm..
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
<div>
<Link to='/register'>new user? click here to register</Link>
</div>
</Form>
</div>
</div>
)
}
And Login.test.tsx:
test("allows user to input their email", () => {
const onSubmit = jest.fn();
renderWithRouter(<Login />)
const input = screen.getByLabelText("Email address")
const pwd = screen.getByLabelText("Password")
const button = screen.getByText("Submit")
fireEvent.change(input, { target: { value: "t#t.com"}})
fireEvent.change(pwd, { target: { value: "123456"}})
fireEvent.click(button)
expect(onSubmit).toBeCalled()
})
})

Answer 1

Haven't run it but refactor to something like this and then test the LoginForm component.
import React, { useState } from 'react';
import { useAuth } from 'context/authContext'
import { useHistory, Link } from 'react-router-dom'
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button'
interface LoginFormProps {
onSubmit: (email: string, password: string) => void;
errors: boolean;
}
export const LoginForm: React.FC<LoginFormProps> = ({onSubmit, errors}) => {
const [email, setEmail] = useState<string>();
const [password, setPassword] = useState<string>();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
onSubmit(email, password)
}
return(
<div className="login-wrapper">
<h1>Please Log In</h1>
<div className='form-wrapper'>
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
isInvalid={errors ? true : false}
type="email"
placeholder="Enter email"
onChange={e => setEmail(e.target.value)}/>
<Form.Control.Feedback type="invalid">
{errors ? 'either you don\'t have an account or the email and password do not match' : null}
</Form.Control.Feedback>
<Form.Text className="text-muted">
umm..
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
<div>
<Link to='/register'>new user? click here to register</Link>
</div>
</Form>
</div>
</div>
)
}
export const Login = (props: any) => {
const { setUser, loginUser } = useAuth()
const [errors, setErrors] = useState<boolean>(false)
const history = useHistory()
const handleSubmit = (email, password) => {
loginUser({
email,
password
}).then((result: any) => {
console.log(result)
if (result.message === 'login error') {
setErrors(true)
} else {
history.push('/dashboard/home')
}
})
}
return(
<LoginForm onSubmit={handleSubmit} errors={errors} />
)
}