javascript - Expected number of calls: >= 1 Received number of calls: 0 - Stack Overflow

admin管理员组

文章数量:1246620

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

Share Improve this question Follow edited Nov 13, 2020 at 21:36 The Dead Man asked Nov 13, 2020 at 15:15 The Dead ManThe Dead Man 5,5663232 gold badges124124 silver badges225225 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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).

本文标签： javascriptExpected number of calls gt 1 Received number of calls 0Stack Overflow