Mocking

What is Mocking

Imagine our site goes through a payment gateway. If we perform an actual transaction, running the test will cost us a fortune.

Imagine everytime you go through a form it will send network requests to your server. If there is any network issue or your server is down, then your test will fails without any issue in your code.

How do we solve these problems? Mocking.

Mocking is the process of switching an actual operation to something that “seems like the actual operation” as far as your code cares.

For instance, instead of going through an actual transaction, we can replace the payment gateway with a fake gateway that returns similar response. Instead of making network requests, we replace it with a function that returns similar data.

The Downside of Mocking

Mocking may seems nice, however it comes with a big drawbacks: you’re no longer verifying the actual behaviors.

Nonetheless, as discussed, there are valid scenarios for mocking, just beware of unnecessary mocking.

How to Mock Your Code

auth.service.spec.js
jsx
import { register } from './auth.service';
test(`register a new customer`, async () => {
  const result = await register({
    name: 'Andy Lau',
    email: 'andy@lau.com',
  });
});

auth.service.spec.js
jsx
import { register } from './auth.service';
test(`register a new customer`, async () => {
  const result = await register({
    name: 'Andy Lau',
    email: 'andy@lau.com',
  });
});

auth.service.spec.js
jsx
import { fetchJson as fetchJsonMock } from '../../lib/ajax'; // highlight-line
import { register } from './auth.service';
jest.mock('../../lib/ajax'); // highlight-line
// highlight-start
const mockAuthUser = {
  id: Date.now(),
  name: 'Malcolm Kee',
  email: 'malcolm@kee.com',
  joinDate: Date.now(),
};
// highlight-end
test(`register a new customer`, async () => {
  // highlight-start
  fetchJsonMock
    .mockImplementationOnce(() => Promise.resolve([]))
    .mockImplementationOnce(() => Promise.resolve(mockAuthUser));
  // highlight-end
  const result = await register({
    name: 'Andy Lau',
    email: 'andy@lau.com',
  });
  expect(result).toBe(mockAuthUser); // highlight-line
});

auth.service.spec.js
jsx
import { fetchJson as fetchJsonMock } from '../../lib/ajax'; // highlight-line
import { register } from './auth.service';
jest.mock('../../lib/ajax'); // highlight-line
// highlight-start
const mockAuthUser = {
  id: Date.now(),
  name: 'Malcolm Kee',
  email: 'malcolm@kee.com',
  joinDate: Date.now(),
};
// highlight-end
test(`register a new customer`, async () => {
  // highlight-start
  fetchJsonMock
    .mockImplementationOnce(() => Promise.resolve([]))
    .mockImplementationOnce(() => Promise.resolve(mockAuthUser));
  // highlight-end
  const result = await register({
    name: 'Andy Lau',
    email: 'andy@lau.com',
  });
  expect(result).toBe(mockAuthUser); // highlight-line
});

How to Mock Libraries

Mock Global Function/Object

Mocking Libraries

xhr-mock