I have a React Native project that contains only the sample Jest tests that are created with a new project (they just check if rendering works on iOS and Android).

My project uses fetch for network requests in one of the ponents. This works fine when I run the app, but when I run the tests they fail with this error message:

TypeError: fetch is not a function.

Anyone knows what's going on?

Here's the part of my code that uses fetch:

export default class MainScene extends Component {

constructor(props) {
    super(props);
    this.renderRowView = this.renderRowView.bind(this);
}

onFetch(page = 1, callback) {

    var date = new Date();
    date.setDate(date.getDate() - 7);

    fetch(  url, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then((response) => response.json())
    .then((responseJson) => {
        if (responseJson.response.pages <= page) {
            callback(responseJson.response.results, {
                allLoaded: true
            });
        } else {
            callback(responseJson.response.results);
        }
    })
    .catch((error) => {
        console.error(error);
    });
}}

An the test file:

import 'react-native';
import React from 'react';
import Index from '../index.ios.js';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <Index />
  );
});

I have a React Native project that contains only the sample Jest tests that are created with a new project (they just check if rendering works on iOS and Android).

My project uses fetch for network requests in one of the ponents. This works fine when I run the app, but when I run the tests they fail with this error message:

TypeError: fetch is not a function.

Anyone knows what's going on?

Here's the part of my code that uses fetch:

export default class MainScene extends Component {

constructor(props) {
    super(props);
    this.renderRowView = this.renderRowView.bind(this);
}

onFetch(page = 1, callback) {

    var date = new Date();
    date.setDate(date.getDate() - 7);

    fetch(  url, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then((response) => response.json())
    .then((responseJson) => {
        if (responseJson.response.pages <= page) {
            callback(responseJson.response.results, {
                allLoaded: true
            });
        } else {
            callback(responseJson.response.results);
        }
    })
    .catch((error) => {
        console.error(error);
    });
}}

An the test file:

import 'react-native';
import React from 'react';
import Index from '../index.ios.js';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <Index />
  );
});

• javascript
• react-native
• jestjs

Share Improve this question Follow edited Mar 7, 2017 at 13:33 Mihai Damian asked Mar 7, 2017 at 13:01 Mihai DamianMihai Damian 11.4k1212 gold badges6161 silver badges8282 bronze badges 3

• you should show some code. Also does this help? stackoverflow./questions/30954899/… – Matthias Commented Mar 7, 2017 at 13:12
• Posted code where I use fetch. I'm not using require for it so my issue seems different. – Mihai Damian Commented Mar 7, 2017 at 13:34
• fetch es with react-native but not with nodeJS (which is what I guess runs Jest - never used it my self). Try adding a fetch polyfill for you tests – Bruno Grieder Commented Mar 7, 2017 at 13:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Add this to your test file.

import 'isomorphic-fetch';