反应测试图中的模拟功能误差

Question

我是我新手进行反应测试的每个人，我正在尝试做一些练习示例，我遇到了一个错误，需要您的帮助，这是我的应用程序组件，

  const[firstName,setFirstName]=useState("")
  const[lastName,setLastName]=useState("")
  const [data,setData] = useState({})

  const handleFirstName = (e) =>{
    setFirstName(e.target.value)
  }
  const handleLastName = (e) =>{
    setLastName(e.target.value)
  }
  
  const handleSubmit = (e) =>{
    e.preventDefault();
    setData({firstName,lastName})
    console.log(firstName,lastName)
  }

  return (
    <div className="App">
     <form onSubmit={handleSubmit} data-testid="form" >
       <div>
         <label>FirstName
         <input type="text" name="firstName" id="firstName" value={firstName} onChange={handleFirstName}/>
         </label>
       </div>
       {firstName && firstName.length > 10 && <p data-testid="error-msg" >FirstName is not valid</p>}
       <div>
         <label>lastName
         <input type="text" name="lastName" id="lastName" value={lastName} onChange={handleLastName}/>
         </label>
       </div>
       <button type="submit" name="submit" disabled={firstName === ""} >submit</button>
     </form>
    </div>
  );
}

这是我的测试逻辑，

  const mockFunction = jest.fn();
  const {getByText}=render(<App onSubmit={mockFunction}/>)
  const firstNameLabel = screen.getByRole("textbox",{'name':'FirstName'})
  fireEvent.change(firstNameLabel,{"target":{'value':"dhffssß"}})
  const lastNameLabel = screen.getByRole("textbox",{"name":"lastName"})
  fireEvent.change(lastNameLabel,{"target":{'value':"dhfffsß"}})
  const btn = screen.getByRole('button',{'name':'submit'})
  fireEvent.click(btn)
  expect(mockFunction).toHaveBeenCalledTimes(1)
 })

我正在测试简单的表单，但会得到此错误的

---

期望（ jest.fn（））。

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

---

Answer 1

尝试调用onsubmit函数，您在handlesabmit处理程序中传递。在这种情况下，您应该能够在测试中跟踪onsubmit回调。

const App = ({ onSubmit }) => {
  const[firstName,setFirstName]=useState("")
  const[lastName,setLastName]=useState("")
  const [data,setData] = useState({})

  const handleFirstName = (e) =>{
    setFirstName(e.target.value)
  }
  const handleLastName = (e) =>{
    setLastName(e.target.value)
  }
  
  const handleSubmit = (e) =>{
    e.preventDefault();
    setData({firstName,lastName});
    console.log(firstName,lastName);
    onSubmit();
  }

  return (
    <div className="App">
     <form onSubmit={handleSubmit} data-testid="form" >
       <div>
         <label>FirstName
         <input type="text" name="firstName" id="firstName" value={firstName} onChange={handleFirstName}/>
         </label>
       </div>
       {firstName && firstName.length > 10 && <p data-testid="error-msg" >FirstName is not valid</p>}
       <div>
         <label>lastName
         <input type="text" name="lastName" id="lastName" value={lastName} onChange={handleLastName}/>
         </label>
       </div>
       <button type="submit" name="submit" disabled={firstName === ""} >submit</button>
     </form>
    </div>
  );
}
}

Answer 2

更改firstName输入后，您可能需要等到启用提交按钮之前，然后等待回调调用（不确定第二个等待很有用）：

import { render, waitFor } from '@testing-library/react';

const mockFunction = jest.fn();
const {getByText}=render(<App onSubmit={mockFunction}/>)
const firstNameLabel = screen.getByRole("textbox",{'name':'FirstName'})
fireEvent.change(firstNameLabel,{"target":{'value':"dhffssß"}})
const lastNameLabel = screen.getByRole("textbox",{"name":"lastName"})
fireEvent.change(lastNameLabel,{"target":{'value':"dhfffsß"}})

// wait until button is enabled
await waitFor(() => expect(getByText('submit').toBeEnabled());

fireEvent.click(getByText('submit'));
await waitFor(() => expect(mockFunction).toHaveBeenCalled();