Reprinted address

Mock Functions(Mock Return Values) for React16 Jest Unit Tests

Project Initialization [Use previous projects here to save time]

Project Initialization Address

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.20

Pull out

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.20
npm install 

Mock Return Values

Jest's mock function can also be used to inject test values into test code, as follows

const myMock = jest.fn();
console.log(myMock);

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

console.log(myMock(), myMock(), myMock(), myMock(), myMock());

After running NPX jest src/_tests_/jest_mock_return_values.test.js -- notify -- watchman = false, the output is similar to the following

console.log src/__tests__/jest_mock_return_values.test.js:2
{ [Function: mockConstructor]
    _isMockFunction: true,
    getMockImplementation: [Function],
    mock: [Getter/Setter],
    mockClear: [Function],
    mockReset: [Function],
    mockRestore: [Function],
    mockReturnValueOnce: [Function],
    mockResolvedValueOnce: [Function],
    mockRejectedValueOnce: [Function],
    mockReturnValue: [Function],
    mockResolvedValue: [Function],
    mockRejectedValue: [Function],
    mockImplementationOnce: [Function],
    mockImplementation: [Function],
    mockReturnThis: [Function],
    mockName: [Function],
    getMockName: [Function] }

console.log src/__tests__/jest_mock_return_values.test.js:9
10 'x' true true true

Mock functions are also very effective in using function continuation-passing style code. Code written in this style helps avoid the need for complex stubs to recreate the behavior of the real components they represent, and thus tends to inject values directly into tests before using them. Look specifically at the following code

const filterTestFn = jest.fn();

// The first mock returns true, and the second mock returns false.
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(filterTestFn);

console.log(result);
console.log(filterTestFn.mock.calls);

Running NPX jest src/_tests_/jest_mock_return_values.test.js -- notify -- watchman = false yields similar results as follows

console.log src/__tests__/jest_mock_return_values.test.js:20
[ 11 ]

console.log src/__tests__/jest_mock_return_values.test.js:22
[ [ 11, 0, [ 11, 12 ] ], [ 12, 1, [ 11, 12 ] ] ]

Most examples in the real world actually capture and configure analog functions on dependent components, but the technology is the same. In these cases, try to avoid implementing logic inside any function that is not directly tested.

Project Practice Address

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.21