Reactjs 如何通过发送event.target来使用FormData模拟函数

我试图模拟一个使用

FormData

的函数。该函数接受一个依赖于目标中某个内容的事件参数

  buildFormData: (event) => {
    event.preventDefault();
    const { target } = event;
    const data = new FormData(target);

    if (target.querySelectorAll('.ant-select').length) {
      const selectTags = target.querySelectorAll('.ant-select');

      selectTags.forEach((selectTag) => {
        const value = selectTag.querySelector('.ant-select-selection-selected-value').getAttribute('title');
        const property = selectTag.getAttribute('id');
        data.append(property, value);
      });
    }

    const getDataObject = {};

    for (var pair of data.entries()) {
      // Ensures that the data from the forms have a value
      if (pair[1]) {
        getDataObject[pair[0]] = pair[1];
      }
    }

    return getDataObject;
  }

我希望确保该函数从模拟表单返回值的对象

我试过传球：

const event = {
  target: {}
}

但很快意识到目标是空的

---

有没有一种简单的方法来模拟这些数据，以便我从上面的函数中获得预期的返回？

这是解决方案，您可以手动模拟

FormData

和form

事件

：

index.tsx

：

import React，{Component}来自'React'；
导入控制台=需要（“控制台”）；
类XComponent扩展了组件{
建造师（道具）{
超级（道具）；
this.buildFormData=this.buildFormData.bind（this）；
}
公共buildFormData（事件）{
event.preventDefault（）；
const{target}=事件；
const data:any=新表单数据（目标）；
if（target.querySelectorAll（'.ant select'）.length）{
const-selectTags=target.querySelectorAll（'.ant-select'）；
selectTags.forEach（selectTag=>{
const value=selectTag.querySelector（'.ant select selected value'）.getAttribute（'title'）；
const property=selectTag.getAttribute（'id'）；
数据。追加（属性、值）；
});
}
const getDataObject={}；
for（const-pair-of-data.entries（））{
//确保表单中的数据具有值
if（对[1]）{
getDataObject[pair[0]]=pair[1]；
}
}
返回getDataObject；
}
公共渲染（）{
返回(
);
}
}
导出默认XComponent；

index.spec.tsx

：

从“React”导入React；
从“/”导入XComponent；
从“酶”导入{shall}；
const FormDataMock={
追加：jest.fn（），
条目：jest.fn（）
};
描述（'XComponent'，（）=>{
const mockedFormEvent={target:{queryselectoral:jest.fn（）}，preventDefault:jest.fn（）}；
在每个之前（（）=>{
（全局，如有）.FormData=jest.fn（（）=>FormDataMock）；
});
之后（（）=>{
jest.resetAllMocks（）；
});
它（'应该在没有选择标记的情况下正确构建表单数据'，（）=>{
mockedFormEvent.target.querySelectorAll.MockedReturnValueOnce（[]）；
FormDataMock.entries.mockReturnValueOnce（['k1'，'v1'，['k2'，'v2']，['k3'，'v3']）；
常量包装器=浅（）；
const actualValue=（wrapper.instance（）如有）.buildFormData（mockedFormEvent）；
expect（实际值）.toEqual（{k1:v1'，k2:v2'，k3:v3'}）；
expect（mockedFormEvent.preventDefault）.toBeCalledTimes（1）；
expect（mockedFormEvent.target.querySelectorAll）.toBeCalledWith（'.ant select'）；
expect（（全局，如有）.FormData）.toBeCalledTimes（1）；
});
它（'应使用select标记正确构建表单数据'，（）=>{
const mockedSelectTag={querySelector:jest.fn（）.mockReturnThis（），getAttribute:jest.fn（）}；
const mockedSelectTags=[mockedSelectTag]；
（mockedSelectTag.querySelector（）.getAttribute如有）。MockedReturnValueOnce（'value'）。MockedReturnValueOnce（'property'）；
mockedFormEvent.target.querySelectorAll.MockedReturnValue（mockedSelectTags）；
FormDataMock.entries.mockReturnValueOnce（['k1'，'v1'，['k2'，'v2']，['k3'，'v3']）；
常量包装器=浅（）；
const actualValue=（wrapper.instance（）如有）.buildFormData（mockedFormEvent）；
expect（（全局，如有）.FormData）.toBeCalledTimes（1）；
expect（实际值）.toEqual（{k1:v1'，k2:v2'，k3:v3'}）；
expect（FormDataMock.append）.toBeCalledWith（'property'，'value'）；
expect（mockedFormEvent.preventDefault）.toBeCalledTimes（1）；
expect（mockedFormEvent.target.querySelectorAll）.toBeCalledWith（'.ant select'）；
});
});

单元测试结果和覆盖率报告：

通过src/stackoverflow/58136380/index.spec.tsx（5.601s）
XComponent
✓ 应在没有选择标记的情况下正确生成表单数据（11ms）
✓ 应使用select标记（3ms）正确生成表单数据
-----------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-----------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 83.33 | 100 | 100 ||
index.tsx | 100 | 83.33 | 100 | 100 | 27|
-----------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：2次通过，共2次
快照：共0个
时间：10.438秒，估计15秒

---

源代码：

有没有一种方法可以只测试函数，而不是期望它出现在组件中？谢谢你的回答。关于评论，谢谢你的回答。我现在已经开始工作了