React 酶 + jest 如何测试 onSubmit

Question

const handleSubmit = (e) => {
 .preventDefault();
 if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
  setError(true);
  return;
 }
if (loading) return;
  setError(false);
  setLoading(true);
  return Axios.post("/send-email", { value, messageHtml }).then(() => {
   clearTimeout(timerId);
   setSuccess(true);
   setLoading(false);
   setValue("");
   timerId = setTimeout(() => {
    setSuccess(false);
   }, 5000);
    }).catch(() => setLoading(false));
  };

render(
<form onSubmit={handleSubmit} id="get-list-form" autoComplete="off">
 <input
   value={value}
   required
   onChange={handleChange}
   className="input 
   placeholder="Enter your email "
   type="text"
  />  
<button type="submit" className={`button ${btnClass}`}>{btnMessage}</button>
 </form>
);

我有这个代码。这是一个功能组件。 以及如何测试handleSubmit 功能？或者拦截axios调用？ 它调用 onSubmit 事件。 它调用 onSubmit 事件。

wrapper.find('form') .simulate('submit', { preventDefault () {} });

**this code successfuly called onSubmit on form,
but i dont understand how to test axios call inside her.**

Answer 1

您需要在您的测试文件中模拟axios.post() 函数，以便axios.post() 返回一个已解决的承诺。

import * as axios from 'axios';
import MyComponent from '../MyComponent';

jest.mock('axios');// this should come immediately after imports

test('MyComponent handle submit', ()=>{
   axios.post.mockImplementationOnce(() => Promise.resolve());

   // rest of your test
});

更多信息，您可以查看Jest mock functions doc
讨论了导入后立即模拟 axios 的原因here。