预期调用次数：>= 1 接收调用次数：0

Question

我正在学习带钩子的 reactjs 表单，现在我想使用 jest 和 enzyme 测试提交时的表单。

这是我的登录组件。

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

这是login.test.js文件

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

    expect(onSubmit).toBeCalled()
 })

不幸的是，当我运行 npm test 我得到以下错误

我需要做什么来解决这个错误或关于测试表单的教程？

Answer 1

因为您的模拟函数 onSubmit 未绑定到您的表单。你不能这样测试它。如果你要调用一些 api onSubmit，你可以模拟这个 api 并检查它是否被调用 (mockedApiFunction)。

Answer 2

这里的问题是您创建了一个模拟，但它没有被您正在测试的组件使用。

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

解决此问题的方法是模拟您在代码中使用注释 // ....api calLS 描述的 api 调用，并验证这些调用是否成功。

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', 'test@gmail.com')
    const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'cats'); 
    wrapper.find('form').simulate('submit', {
      preventDefault: () =>{}
    })

    expect(submitForm).toBeCalled()
 })

有用的链接

very similar question
mocking modules
understanding jest mocks

免责声明：我对 Enzyme 框架没有经验。

预期调用次数：>= 1 接收调用次数：0

Expected number of calls: >= 1 Received number of calls: 0

javascript

unit-testing

reactjs

jestjs

enzyme

有用的链接