React Jest 中没有定义 FormData答案

【问题标题】：FormData is not defined in React JestReact Jest 中没有定义 FormData
【发布时间】：2020-01-14 01:48:48
【问题描述】：

我正在为 React 项目编写单元测试代码。我正在尝试测试一个功能

//function aa
export const login = (values) => async => (dispatch) => {
  let bodyFormData = new FormData();

  bodyFormData.append('username', values.login);
  bodyFormData.append('password', values.password);
  return await axios({
   method: 'post',
   url: url,
   data: bodyFormData
  }
}

//aa test
it("Login Action", async () => {
  afterEach(() => {
    store.clearActions();
  });
  const values = {
    login: "aaaaa",
    password: "bbbbb"
  };
  const expectedResult = { type: "LOGIN_PASS" };

  const result = await store.dispatch(login(values));
  expect(result).toEqual(expectedResult);
});

在浏览器中，这可以正常工作。但是在测试时我得到以下错误

ReferenceError: FormData 未定义

我尝试使用此模块，但没有成功... https://www.npmjs.com/package/form-data

我不想只测试 axios，我需要测试完整的功能。

【问题讨论】：

我没有看到您的代码创建了const FormData = require("form-data")？因为如果你想使用浏览器专用的数据结构，它有点需要。

标签： reactjs unit-testing jestjs

【解决方案1】：

您需要在单元测试中模拟 FormData，因为 FormData Web API 在 node.js/jsdom 环境中不可用。

function FormDataMock() {
  this.append = jest.fn();
}

global.FormData = FormDataMock

如果您希望在FormData 全局范围内模拟其他方法：

const entries = jest.fn()
global.FormData = () => ({ entries })

【讨论】：

我需要在你的代码中添加 const FormData = require("form-data") 吗？
@Lee 我觉得const formData = new FormData() 够用了，如果不行，你可以试试你用的语句？
谢谢，但我遇到了新问题。 stackoverflow.com/questions/59743632/axios-post-with-react-jest
new window.FormData() 会做

【解决方案2】：

我也遇到了这个问题，结果发现testEnvironment（在jest.config.js内）被设置为'node'。将其更改为 'jsdom' 即可解决。

【讨论】：