Testing a function called on an object with Jest in React Native

Question

EDIT

Current example,

  it('CALLED THE canOpenURL FUNCTION', () => {
    const wrapper = mount(<ResourceCardComponent {...mockProps} />);
    const canOpenURLSpy = jest.spyOn(Linking, 'canOpenURL');
    wrapper.find('TouchableOpacity').simulate('click');
    expect(canOpenURLSpy).toHaveBeenCalled();
    canOpenURLSpy.mockReset();
    canOpenURLSpy.mockRestore();
  });

Error

expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called.

Problem

I am using Jest & Enzyme to test a class made with React Native. This class has a function inside of it that when fired off uses the Linking library to call canOpenUrl and openUrl. I can simulate the click event on the mounted component but I am having trouble knowing how much of this I can actually test.

My goal is to check if Linking.canOpenUrl ever fires off.

Exmaple

The function inside the component looks like this,

  onPressLink() {
    console.log('HEY THIS FUNCTION FIRED WOOT WOOT');
    Linking.canOpenURL(this.props.url).then((supported) => {
      if (supported) {
        Linking.openURL(this.props.url);
      }
    });
  }

I can simulate this firing off like this,

describe('onPressLink has been called!', () => {
  it('It clicks the mock function onPressLink!', (done) => {
    const wrapper = mount(<MyComponent {...mockProps} />);
    const onPressLink = jest.fn();
    const a = new onPressLink();
    wrapper.find('TouchableOpacity').first().simulate('click');
    expect(onPressLink).toHaveBeenCalled();
    done();
  });
});

Now that does work, but my goal is to use something like this,

expect(Linking.canOpenUrl).toHaveBeenCalled();

But I keep getting this error,

TypeError: Cannot read property '_isMockFunction' of undefined

Current code that is trying to check if this function is ever fired off. Which is inside the parent function that is clicked with the simulate method,

  it('calls canOpenURL', () => {
    const wrapper = mount(<MyComponent {...mockProps} />);
    const canOpenURL = jest.spyOn(wrapper.instance, 'onPressLink');
    wrapper.find('TouchableOpacity').simulate('click');
    expect('Linking.canOpenUrl').toHaveBeenCalled();
  });

Question

What is the proper way to check to see if Linking.canOpenURL is fired when its parent function is executed?

Answer 1

(Since Jest 19.0.0+)

You can spy on the Linking module methods using jest.spyOn().

(1) Tell jest to spy on the module method:

const spy = jest.spyOn(Linking, 'canOpenURL');

(2) After doing everything you need to test it, check the spy:

expect(spy).toHaveBeenCalled();

(3) Clean up and stop spying on the module method

spy.mockReset();
spy.mockRestore();

---

If you don't want the tests to use the actual implementation of the methods, you can fake them like this:

jest.spyOn(Linking, 'canOpenURL').mockImplementation(() => Promise.resolve());

Where the function passed to mockImplementation will be whatever you want the method to do when called.

Ref https://facebook.github.io/jest/docs/en/jest-object.html#jestspyonobject-methodname

---

When using the actual implementation of your module method, which is asynchronous, the promise might not have been resolved by the time you tested it. You need to make sure any promise is resolved in your method implementation before making any assertions on it.

One way to deal with this is using async/await, like so:

it('...', async () => {
  // Wait for promise to resolve before moving on
  await wrapper.instance().onPressLink();

  // make your assertions
  expect(...);
});

Another option is using expect().resolves, available since Jest 20.0.0, where you wait for some promise in the argument to expect() to resolve with a value before making an assertion on that value.

expect(somePromiseThatEventuallyResolvesWithValue).resolves.toBe(Value);