CODEWITHSUNDEEP
unit-testingreact-nativejestjs
Jonathan Tuzman
Jonathan Tuzman

Reputation: 13298

ReferenceError: __DEV__ is not defined when trying to test AsyncStorage

I'm using Jest to test my React Native app. I'm trying to mock a call to AsyncStorage and I'm using the mock-async-storage package. Following their instructions, I've set up their simple my test file looks like this:

import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import "react-native";
import MockAsyncStorage from "mock-async-storage";
import { AsyncStorage as storage } from "react-native";

import Station from "../src/models/Station";
import * as actions from "../src/redux/actions/stationActions";

const mockStore = configureMockStore([thunk]);

/* ...other tests  */

describe("async fetching actions", () => {
  describe("using MockAsyncStorage", () => {
    const mock = () => {
      const mockImpl = new MockAsyncStorage();
      jest.mock("AsyncStorage", () => mockImpl);
    };

    mock();

    it("Mock Async Storage working", async () => {
      await storage.setItem("myKey", "myValue");
      const value = await storage.getItem("myKey");
      expect(value).toBe("myValue");
    });
  });
});

Following the example on the package's repo, my tests folder has a __mocks__ folder with this AsyncStorage.js file:

import MockAsyncStorage from '../../../lib/mockAsyncStorage';

export default new MockAsyncStorage();

and these files in the tests folder:

// AsyncStorage.js
export default {}

// UseStorage.js
import AsyncStorage from './AsyncStorage';

export const save = (k, v) => AsyncStorage.setItem(k,v);

export const get = k => AsyncStorage.getItem(k);

When I run the test, I get the following error:


    ReferenceError: __DEV__ is not defined

      63 | 
      64 |     it("Mock Async Storage working", async () => {
    > 65 |       await storage.setItem("myKey", "myValue");
         |             ^
      66 |       const value = await storage.getItem("myKey");
      67 |       expect(value).toBe("myValue");
      68 |     });

      at Object.__DEV__ (node_modules/react-native/Libraries/Performance/Systrace.js:27:28)
      at Object.require (node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:14:18)
      at Object.require (node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js:13:22)
      at Object.require (node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:13:23)
      at Object.require (node_modules/react-native/Libraries/Storage/AsyncStorage.js:15:23)
      at Object.require [as AsyncStorage] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:180:12)
      at storage (tests/fetchStations.test.js:65:13)
      at tryCatch (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:40)
      at Generator.invoke [as _invoke] (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:271:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:97:21)
      at tryCatch (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:40)
      at invoke (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:135:20)
      at node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:170:11
      at callInvokeWithMethodAndArg (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:169:16)
      at AsyncIterator.enqueue (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:192:13)
      at AsyncIterator.prototype.(anonymous function) [as next] (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:97:21)
      at Object.<anonymous>.exports.async (node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:216:14)
      at Object._callee (tests/fetchStations.test.js:64:38)

I've tried many things suggested in other answers and nothing has helped:

How do I make this work??

Small update: This may actually not have anything to do with mocks. I've removed all attempts to mock AsyncStorage, and tried just testing my method that uses AsyncStorage. All I've done is:

describe("fetchStations(useCache)", () => {
    beforeEach(async () => {
      await store.dispatch(actions.fetchStations({ useCache: true }));
    });

    xit("should return an object with the stations in a 'stations' key", () => {
      expect(store.getActions()).toEqual(
        expect.arrayContaining(expectedGetActions)
      );
    });
  });

Where actions.fetchStations includes a call to AsyncStorage.getItem. And I get the same __DEV__ is not defined error.

Upvotes: 5

Views: 2492

Answers (1)

Tobias Zucali
Tobias Zucali

Reputation: 177

If you configure jest to use the react-native preset, it will set up the react native javascript environment for you including the global __DEV__ variable.

Upvotes: 1

Related Questions