Jest.fn - return value returns undefined when using jest.mock

user_2409736 0
Viewed 12878

I have the following file I'm trying to write unit tests for:

import { document } from '../../globals';
const Overlay = () => {
  console.log(document.getElementsByTagName()); // this outputs 'undefined'
};

I'm struggling to mock the getElementsByTagName function. My test looks like this.

import { document } from '../../globals';
jest.mock('../../globals', () => ({
  document: {
    getElementsByTagName: jest.fn().mockReturnValue('foo')
  }
}));
console.log(document.getElementsByTagName()); // this outputs 'foo'

But unfortunately, the console.log in the top file always outputs undefined. It can see the document object and the getElementsByTagName mock, but the return value is always undefined.

If I console.log(document.getElementsByTagName) I get the following:

{ getElementsByTagName:
   { [Function: mockConstructor]
     _isMockFunction: true,
     getMockImplementation: [Function],
     mock: [Getter/Setter],
     mockClear: [Function],
     mockReset: [Function],
     mockReturnValueOnce: [Function],
     mockReturnValue: [Function],
     mockImplementationOnce: [Function],
     mockImplementation: [Function],
     mockReturnThis: [Function],
     mockRestore: [Function] },
}

But if I do the same in the other file I get this:

function () {
  return fn.apply(this, arguments);
}

My suspicion is that jest.mock is wrapping the jest.fn mock in another function.. any ideas?

jestjs testing unit-testing javascript
1 Answers

Try using .mockReturnValue() after assignment

I encountered the same behavior and found success by calling mockFn.mockReturnValue(value) after assignment.

For example:

import { document } from '../../globals.js'

jest.mock('../../globals.js', () => ({
  document: {
    getElementsByTagName: jest.fn()
  }
}))

document.getElementsByTagName.mockReturnValue('foo')

console.log(document.getElementsByTagName()); // this outputs 'foo'

I have seen both patterns within the jest documentation.

I wonder if the latter case requires some other pattern of interaction to assert on the mocked return value, but I haven't figured it out. I can't seem to replicate success using the spyOn pattern suggested in another answer here.

user_25025320
Related