How to use readPackageSync method in Jest

https://gist.github.com/himanshusinghs/bd86262ce3c9e6f4d691b5242de707ef

Above is the link to a gist containing the mock of React Native Firebase. Implementation instructions are also there. I am summarising them here as well -

1. You will be mocking a node_module and to do so there are multiple ways depending upon your use case. But since you will need to mock Firebase for almost every component that utilizes it, we will be implementing a global mock of React Native Firebase module.

2. Create a __mocks__ folder in your project's root directory adjacent to your node_modules folder.

3. Now create a file named react-native-firebase.js inside the __mocks__ directory.

4. Copy paste the contents from RNFirebaseMock.js in the above gist to your react-native-firebase.js file.

How this works ?

Jest has an auto mocking feature. Now every time you will run your test cases using Jest, and whenever any of your test case will require react-native-firebase module, Jest will first look into __mocks__ folder and see if there is a react-native-firebase.js containing some mock implementation of the required module.

If there is then jest will require that mock implementation instead of original module otherwise it will continue on to require original react-native-firebase module.

Things to be noted

You need to observe that the name of the mock file that we created react-native-firebase.js inside __mocks__ folder is similar to the name of installation folder of actual react-native-firebase module. Just go to node_modules and scroll down till you find react-native-firebase folder.

Yes, the name of your mock implementation of a module need to be exactly same as the name of the module itself.

Things to do this point onwards

Congratulations for you started with unit testing and chose an awesome framework for the same. Trust me, testing react-native or react is such a PITA (Pain in the Ass) that you should consider going through Jest documentation seriously and primarily focus on the mock part.

Later you may very well encounter problems while setting up Jest for react-native or react and there the documentation will come in handy.

Here are some series of tutorials and references that helped me get started with Jest and unit testing react and react-native -

1. Jest Documentation
2. Testing React and React Native using Jest/Enzyme setup
3. Reference article for Mocks, Stubs and Fakes
4. Testing Redux - P1
5. Testing Redux - P2
6. Testing Redux - P3

Solution for the error after applying RNFirebaseMock

The error that you now are getting is because there doesn't exist a function named app under default export of your mock. So let create it.

Go to your mocks directory and open react-native-firebase-mock.js. look for export default class RNFirebase, inside that class there are several static methods with no implementation. Create one function doing nothing in the class with the name app.

Your default exported class should look something like this now -

export default class RNFirebase {
  static initializeApp() {
    RNFirebase.firebase = new MockFirebase()
    RNFirebase.promises = []
    return RNFirebase.firebase
  }

  static reset() {
    RNFirebase.promises = []
    RNFirebase.firebase.databaseInstance = null
  }

  static waitForPromises() {
    return Promise.all(RNFirebase.promises)
  }

  static analytics () {}

  static app () {}
}

This should do the trick, however I belive you are extensively using Firebase. In my case a mock implementation as simple as the one I gave you did the trick for me.

If you are extensively using most of the APIs of Firebase then you are bound to get more errors like you just saw because we haven't yet added mock implementations for all the APIs of RNFirebase in our Firebase mock.

If that case shall ever arise, I would suggest that you look at this mock implementation of Firebase which I guess covers the Firebase completely.

When you use the tagged template literal version for the table parameter of it.each, jest is using the pretty-format library behind the scenes to generate the title from the test data (if the test data is not a primitive type).

Unfortunately for your purposes, the pretty-format library does not seem to use the toString method from functions in order to format them.

As an alternative solution, you can use the array version for the table parameter:

it.each([
    [ [1, 2], [1, 2, 3], (l, r) => l === 1 ],
    [ [1, 2], [1, 2, 3], (l, r) => r === 2 ],
    [ [2, 3], [1, 2, 3], (l, r) => r === 3 ],
    [ [2, 3], [1, 2, 3], (l, r) => l + r === 5 ],
    [ [undefined, undefined], [1, 2, 3], (l, r) => l === r ],
])
('should return %p for %p and %s', (expected, array, predicate) => {
    expect(findPairwise(array, predicate)).toEqual(expected);
});

Note that I have changed the order of the parameters so that the expected value is on the first place. That's because the mapping between the test data and the placeholders in the title is based on order in the array version of table for it.each.

Try running the jest command with --env=jsdom. This will mock most browser functions and will solve your issues.

There are more ways of setting the test environment, take a look at:

https://jestjs.io/docs/en/configuration#testenvironment-string

Update

This worked for the window.scrollTo errors

https://qiita.com/akameco/items/0edfdae02507204b24c8

You are using the new Modular SDK which uses a different syntax than the name-spaced (v8) version. Try this:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth" // New import

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app)
export default app

Do note that if you must refactor all your code to work with the new syntax. I'd recommend checking out the documentation to learn more about the new syntax. Also checkout this Firecast.

---

If you wish to use the V8 name-spaced syntax, then you can use the compat versions:

import firebase from "firebase/compat/app"
import "firebase/compat/auth"

if (!firebase.apps.length) firebase.initializeApp({...config})

export const auth = firebase.auth()
export default app

Found great help from the answer here: Jest spyOn function called

This was the important step I was missing:

const instance = wrapper.instance()
const spy = jest.spyOn(instance, 'yearOnChange')

Updated working test with 2 working expects.

it('yearOnChange method is called', function() {
    const instance = wrapper.instance();  // <-- Needed to do this here
    const spy = jest.spyOn(instance, 'yearOnChange');  // <-- Then use instance here
    wrapper.instance().forceUpdate();
    
    const event = {
        target: {
            value: '1999'
        }
    };

    wrapper.instance().yearOnChange(event);
    wrapper.simulate('change', event);

    const result = wrapper.state('year');
    console.log('result', result); // result = 1999
    expect(result).toEqual('1999');
    expect(spy).toHaveBeenCalled();
});

It is possible!

describe('Event.isTrusted', () => {

  class CustomMouseEvent {
    isTrusted = true;
    // add the bubbles and cancellation here if needed
  }

  beforeAll(() => {
    Object.defineProperty(global, 'MouseEvent', {
       value: CustomMouseEvent,
    });

    document.body.dispatchEvent = jest.fn();
    const btn = document.createElement('button');
    btn.id = 'btn';
    document.body.appendChild(btn);
  });
  ...
  it('should allow user events', () => {
    const event = new CustomMouseEvent();
    document.getElementById('btn').dispatchEvent(event);
    expect(document.body.dispatchEvent).toHaveBeenCalled();
  });
});

If you log this objects inside jest unit test you will see the result is very similar:

console.log(new CustomEvent("myEvent", {
   bubbles: true,
   composed: true,
   detail: { someProperty: "123" },
}));
console.log(new CustomEvent("myEvent", {
  bubbles: true,
  composed: true,
  detail: { someProperty: "error" },
}));

In my case the result for both was: { isTrusted: [Getter] }

And that is why this won't fail:

expect(dispatchEventSpy).toHaveBeenCalledWith(customEvent);

You can access the expected object for a better assertion using dispatchEventSpy.mock.calls[0][0]:

  expect(dispatchEventSpy.mock.calls[0][0].detail).toEqual({
    someProperty: "123",
  });
  expect(dispatchEventSpy.mock.calls[0][0].bubbles).toEqual(true);
  expect(dispatchEventSpy.mock.calls[0][0].composed).toEqual(true);

Reset the modules and require them again for each test:

describe("initializes script", () => {
    afterEach(() => {
        jest.resetModules() 
    });    

    beforeEach(() => {
        jest.mock("fs");
    })

    test("it checks for a package.json in current directory", () => {
        const init = require("../init");
        init();
    });

    test("it stops script if there's a package.json in dir", () => {
        const init = require("../init");
        init();
    });
}

The following sections explain the behaviors of each function and its corresponding config directive. In the case of config directives, the explained behavior takes place in between each test making them more and more isolated from the other tests.

References to fn are implying a sample jest mock function under each of these actions.

jest.clearAllMocks() and clearMocks:[boolean]

Resets all the mocks usage data, not their implementation. In other words, it only replaces fn.mock.calls and fn.mock.instances properties of a jest mock function.

jest.resetAllMocks() and the resetMocks:[boolean]

A superset of clearAllMocks() which also takes care of resetting the implementation to a no return function. In other words, it will replace the mock function with a new jest.fn(), not just its fn.mock.calls and fn.mock.instances.

jest.restoreAllMocks() and restoreMocks:[boolean]

Similar to resetAllMocks(), with one very important difference. It restores the original implementation of "spies". So, it goes like "replace mocks with jest.fn(), but replace spies with their original implementation".

So, in cases where we manually assign things with jest.fn() (not spies), we have to take care of implementation restoration ourselves as jest won't be doing it.

jest.resetModules() and resetModules:[boolean]

It resets Jest's module registry which is a cache for all required/imported modules. Jest will re-import any required module after a call to this. Imagine a clean slate without having to deal with all the mocked out modules in other tests.

jest.resetModuleRegistry

It's just an alias for resetModules, see:
https://github.com/facebook/jest/blob/7f69176c/packages/jest-runtime/src/index.ts#L1147

---

See how clearing, resetting and restoring differ in action:
https://repl.it/@sepehr/jest-mock-api-reset-restore#jest-mock-apis.test.js

PASS  ./jest-mock-apis.test.js

jest mock reset/restore api
  when calling mockReset() on a test double with custom impl.
    if the test double is a spy
      ✓ jest replaces the impl. to a new undefined-returning jest.fn() (18ms)
    if the test double is "not" a spy
      ✓ jest replaces the impl. to a new undefined-returning jest.fn() (17ms)

  when calling mockRestore() on a test double with custom impl.
    if the test double is "not" a spy
      ✓ jest resets the impl. to a new undefined-returning jest.fn() (2ms)
    if the test double is a spy
      ✓ jest restores the original impl. of that spy (7ms)

---

describe('jest mock reset/restore api', () => {
  
  describe('when calling mockReset() on a test double with custom impl.', () => {
    describe('if the test double is a spy', () => {
      test('jest replaces the impl. to a new undefined-returning jest.fn()', () => {
        const module = { api: () => 'actual' }
        jest.spyOn(module, 'api').mockImplementation(() => 'spy mocked')
        
        expect(module.api()).toStrictEqual('spy mocked')
        expect(module.api).toHaveBeenCalledTimes(1)

        module.api.mockReset()

        expect(module.api()).toStrictEqual(undefined)
        expect(module.api).toHaveBeenCalledTimes(1)
      })
    })
    

    describe('if the test double is "not" a spy', () => {
      test('jest replaces the impl. to a new undefined-returning jest.fn()', () => {
        const api = jest.fn(() => 'non-spy mocked')
        
        expect(api()).toStrictEqual('non-spy mocked')
        expect(api).toHaveBeenCalledTimes(1)

        api.mockReset()

        expect(api()).toStrictEqual(undefined)
        expect(api).toHaveBeenCalledTimes(1)
      })
    })
  })

  describe('when calling mockRestore() on a test double with custom impl.', () => {
    describe('if the test double is "not" a spy', () => {
      test('jest resets the impl. to a new undefined-returning jest.fn()', () => {
        const api = jest.fn(() => 'non-spy mocked')
        
        expect(api()).toStrictEqual('non-spy mocked')
        expect(api).toHaveBeenCalledTimes(1)

        api.mockRestore()

        expect(api()).toStrictEqual(undefined)
        expect(api).toHaveBeenCalledTimes(1)
      })
    })

    describe('if the test double is a spy', () => {
      test('jest restores the original impl. of that spy', () => {
        const module = { api: () => 'actual' }
        jest.spyOn(module, 'api').mockImplementation(() => 'spy mocked')
        
        expect(module.api()).toStrictEqual('spy mocked')
        expect(module.api).toHaveBeenCalledTimes(1)

        module.api.mockRestore()

        expect(module.api()).toStrictEqual('actual')
        expect(module.api).not.toHaveProperty('mock')
      })
    })
  })
})