CODEWITHSUNDEEP
unit-testingreact-nativefetch-apijestjs
jhm
jhm

Reputation: 4539

React Native - mocking FormData in unit tests

I'm having issues testing my thunks, as many of my API calls are using FormData, and I can't seem to figure out how to mock this in tests. I'm using Jest.

My setup file looks like this:

import 'isomorphic-fetch';

// Mocking the global.fetch included in React Native
global.fetch = jest.fn();

// Helper to mock a success response (only once)
fetch.mockResponseSuccess = body => {
  fetch.mockImplementationOnce(() =>
    Promise.resolve({ json: () => Promise.resolve(JSON.parse(body)) })
  );
};

// Helper to mock a failure response (only once)
fetch.mockResponseFailure = error => {
  fetch.mockImplementationOnce(() => Promise.reject(error));
};

However, I get the following error on all tests that require FormData:

ReferenceError: FormData is not defined

I've tried importing the FormData file from react-native-mock, under src/Libraries/Network/FormData, but it didn't work.

So I was wondering if anyone has had any luck doing this?

In general, I'm having a hard time figuring out the best way to mock fetch requests in React Native, so any advice here would be nice. I've tried the jest-fetch-mock lib (and opened an issue about FormData), tried setting up with nock (no luck), and this plain Jest implementation, but nothing feels right yet.

Upvotes: 9

Views: 16560

Answers (3)

Reza Babaei
Reza Babaei

Reputation: 1075

this seems working in my case:

// @ts-ignore
global.FormData = require('react-native/Libraries/Network/FormData');

Upvotes: 5

Susth
Susth

Reputation: 264

Add the following code to beginning of your test file 

global.FormData = require('FormData')

or

have something like this in your package.json

{
    "jest": {
        "preset": "react-native",
        "transformIgnorePatterns": [
          "<rootDir>/node_modules/(?!react-native|tcomb-form-native|ReactUtils|react-native-button)"
        ],
        "automock": false,
        "setupFiles": [
          "./setupJest.js"
        ]
      }
}

Then create a setupJest.js file on same folder as package.json and have following code in it

global.FormData = require('FormData')

So that jest calls the setupJest.js every time jest runs test

Upvotes: 2

brunovianarezende
brunovianarezende

Reputation: 866

This is an old question, but since I've found it in first page at google, here goes what I've done:

at the beginning of my test I added:

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

this will make sure all places that do

const formData = new FormData()

will use my mock.

Of course, I've only mocked the 'append' method, since in my case it was the only thing I needed. The function that I was testing returned the created FormData object and I did this to test if all worked as expected:

const resultFormData = theFunction()
expect(resultFormData.append.mock.calls.sort(sortFunc)).toEqual(expected)

Upvotes: 22

Related Questions