I am learning reactjs form with hooks, now I would like to test form on submit using jest and enzyme.

here is my login ponent.

import React from 'react'

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

Here is is login.test.js file

it('should submit when data filled', () => {
    const onSubmit = jest.fn();
    const wrapper = shallow(<Login />)
    const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', '[email protected]')
    const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'cats'); 
    wrapper.find('form').simulate('submit', {
      preventDefault: () =>{}
    })

    expect(onSubmit).toBeCalled()
 })

Unfortunately when I run npm test I get the following error

What do I need to do to solve this error or tutorial on testing form?

I am learning reactjs form with hooks, now I would like to test form on submit using jest and enzyme.

here is my login ponent.

import React from 'react'

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

Here is is login.test.js file

it('should submit when data filled', () => {
    const onSubmit = jest.fn();
    const wrapper = shallow(<Login />)
    const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', '[email protected]')
    const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'cats'); 
    wrapper.find('form').simulate('submit', {
      preventDefault: () =>{}
    })

    expect(onSubmit).toBeCalled()
 })

Unfortunately when I run npm test I get the following error

What do I need to do to solve this error or tutorial on testing form?

• javascript
• reactjs
• unit-testing
• jestjs
• enzyme

2 Answers 2

Issue here is you created a mock but it is not being consumed by the ponent you are testing.

const onSubmit = jest.fn(); // this is not being used by <Login />

A solution to this would be to mock the api calls you described on your code with the ment // ....api calLS and verify those are called successfully.

import { submitForm } from './ajax.js'; // the function to mock--called by handleSubmit
jest.mock('./ajax.js'); // jest mocks everything in that file

it('should submit when data filled', () => {
    submitForm.mockResolvedValue({ loggedIn: true });
    const wrapper = shallow(<Login />)
    const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', '[email protected]')
    const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'cats'); 
    wrapper.find('form').simulate('submit', {
      preventDefault: () =>{}
    })

    expect(submitForm).toBeCalled()
 })

Useful links

• very similar question
• mocking modules
• understanding jest mocks

Disclaimer: I am not experienced with the Enzyme framework.

Because your mocked function onSubmit is not binded to your form. You can't test it this way. If you gonna call some api onSubmit, you can mock this api and check if it was called (mockedApiFunction).