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 the login.test.js file

 describe('my sweet test', () => {
    it('clicks it', () => {
      
       const wrapper = shallow(<Login />);
       const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', '[email protected]')
       const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'death'); 

       expect(updatedEmailInput.props().value).toEqual('[email protected]');
       expect(updatedPasswordInput.props().value).toEqual('death');

       const instance = wrapper.instance()
       const spy = jest.spyOn(instance, 'handleSubmit')
   
       instance.forceUpdate();    
   
       const submitBtn = app.find('#sign-in')
       submitBtn.simulate('click')
       expect(spy).toHaveBeenCalled()

    })
    
  })

Unfortunately when I run npm test I get the following error.

What do I need to do to solve this error or can someone provide a tutorial on how to test a form submit?

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 the login.test.js file

 describe('my sweet test', () => {
    it('clicks it', () => {
      
       const wrapper = shallow(<Login />);
       const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', '[email protected]')
       const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'death'); 

       expect(updatedEmailInput.props().value).toEqual('[email protected]');
       expect(updatedPasswordInput.props().value).toEqual('death');

       const instance = wrapper.instance()
       const spy = jest.spyOn(instance, 'handleSubmit')
   
       instance.forceUpdate();    
   
       const submitBtn = app.find('#sign-in')
       submitBtn.simulate('click')
       expect(spy).toHaveBeenCalled()

    })
    
  })

Unfortunately when I run npm test I get the following error.

What do I need to do to solve this error or can someone provide a tutorial on how to test a form submit?

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

• MO the problem is you should not be testing handleSubmit but rather your API calls. You can spy on that method instead and your test should expect that it is called with the appropriate params. – josemigallas Commented Feb 21, 2023 at 11:55

1 Answer 1

In the documentation it's said that you cant use shallow.instance() for functional ponents It will return null: https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/instance.html There was also a previous answer on this topik Enzyme instance() returns null

You can pass validated function handleSubmit to Login as a prop like there How to use jest.spyOn with React function ponent using Typescript

 // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const handleSubmit = jest.fn();
      const wrapper = mount(
          <Login handleSubmit={handleSubmit}/>
      );
      const instance = wrapper.instance();
      const submitBtn = app.find('#sign-in')
      submitBtn.simulate('click')
      expect(handleSubmit).toHaveBeenCalled();
    });
  }

You need to call this test function handleSubmit in your login ponent either as a part of onSubmit or export whole onSubmit from upper ponents. Example login code with importing part of login function

import React from 'react'

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

    const onSubmit = async (e) => {
        if (handleSubmit) {
          handleSubmit()
        }
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={onSubmit} 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

Example login code with importing of submit function

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
   
    // handleSubmit is imported with props
 
    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