What does jest.fn() do and how can I use it?

Question

Can anyone explain how jest.fn() actually works, with a real world example, as I'm confused on how to use it and where it has to be used.

For example if I have the component Countries which fetches country List on click of a button with help of the Utils Function

export default class Countries extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      countryList:''
    }
  }

  getList() {
    //e.preventDefault();
    //do an api call here
    let list = getCountryList();
    list.then((response)=>{ this.setState({ countryList:response }) });
  }

  render() {

    var cListing = "Click button to load Countries List";

    if(this.state.countryList) {
      let cList = JSON.parse(this.state.countryList);
      cListing = cList.RestResponse.result.map((item)=> { return(<li key={item.alpha3_code}> {item.name} </li>); });
    }

    return (
      <div>
        <button onClick={()=>this.getList()} className="buttonStyle"> Show Countries List </button>
        <ul>
          {cListing}
        </ul>
      </div>
    );

  }
}

Utils function used

const http = require('http');


    export function getCountryList() {
      return new Promise(resolve => {
        let url = "/country/get/all";
        http.get({host:'services.groupkt.com',path: url,withCredentials:false}, response => {
          let data = '';
          response.on('data', _data => data += _data);
          response.on('end', () => resolve(data));
        });
      });
    
    
    }

Where could I use jest.fn() or how can I test that getList() function is called when I click on the button?

score 54 · Accepted Answer · edited Jan 08 '21 at 18:09

Jest Mock Functions

Mock functions are also known as "spies", because they let you spy on the behavior of a function that is called indirectly by some other code, rather than just testing the output. You can create a mock function with jest.fn().

Check the documentation for jest.fn()

Returns a new, unused mock function. Optionally takes a mock implementation.

  const mockFn = jest.fn();
  mockFn();
  expect(mockFn).toHaveBeenCalled();

With a mock implementation:

  const returnsTrue = jest.fn(() => true);
  console.log(returnsTrue()) // true;

So you can mock getList using jest.fn() as follows:

jest.dontMock('./Countries.jsx');
const React = require('react/addons');
const TestUtils = React.addons.TestUtils;
const Countries = require('./Countries.jsx');

describe('Component', function() {
  it('must call getList on button click', function() {
    var renderedNode = TestUtils.renderIntoDocument(<Countries />);
    renderedNode.prototype.getList = jest.fn()

    var button = TestUtils.findRenderedDOMComponentWithTag(renderedNode, 'button');

    TestUtils.Simulate.click(button);

    expect(renderedNode.prototype.getList).toBeCalled();
  });
});

For example if i have a function as below function abc() { def() } function def(){ return "called by abc" } how can i use mock in this scenario — NaveenThally, Dec 07 '16 at 03:00
Is this the `const mockFn = jest.fn(() => {});` the same as `const mockFn = jest.fn();`? — Hyfy, Oct 10 '21 at 14:29
@Hyfy For practical purposes, yes, according to the source: https://github.com/facebook/jest/blob/main/packages/jest-mock/src/index.ts#L1109 So, by passing zero arguments to `fn`, it is going to default as `undefined`, a length of zero will be sent to the constructor, and the return value will be `undefined` at all times, which is the same effect you would achieve with the arrow function — nascente_diskreta, Apr 14 '23 at 17:05

score 0 · Answer 2 · answered Jun 20 '23 at 16:25

The Jest library provides the jest.fn() function for creating a “mock” function.

An optional implementation function may be passed to jest.fn() to define the mock function’s behavior and return value.

const mockFunc = jest.fn(() => {
  return "hello testing"
})

test("check return value of mock function", () => {
  expect(mockFunc()).toBe("hello testing")
})

The mock function’s behavior may be further specified using various methods provided to the mock function such as .mockReturnValueOnce(). refer

const mockFunc = jest.fn(() => {
  return "hello testing"
})

mockFunc.mockReturnValueOnce("goodbye")

test("check return value of mock function when called once", () => {
  expect(mockFunc()).toBe("goodbye")
})

test("check return value of mock function after called once", () => {
  expect(mockFunc()).toBe("hello testing")
})

The mock function’s usage (how it was called, what it returned, etc…) may be validated using the expect() API.

expect(mockFunc).toHaveBeenCalledTimes(2);

What does jest.fn() do and how can I use it?

2 Answers2

Linked