Category: JavaScript Answers

In this article, we’ll look at what is the difference between toBe and toEqual in Jest.

What is the difference between ‘toBe’ and ‘toEqual’ in Jest?

The difference between toBe and toEqual in Jest is that toBe is used for comparing primitive values like numbers, strings, and booleans.

It uses === to do the comparison.

Objects are considered equal with toBe if they reference the same object.

toEqual is used for comparing everything else.

We can use toEqual compare objects directly for equality since their content is checked.

Conclusion

The difference between toBe and toEqual in Jest is that toBe is used for comparing primitive values like numbers, strings, and booleans.

Sometimes, we want to mock window.location.href with Jest and Vuejs.

In this article, we’ll look at how to mock window.location.href with Jest and Vuejs.

How to mock window.location.href with Jest and Vuejs?

To mock window.location.href with Jest and Vuejs, we can set the propert window.location property to a value.

For instance, we write

global.window = Object.create(window);
const url = "http://example.com";
Object.defineProperty(window, 'location', {
  value: {
    href: url
  }
});
expect(window.location.href).toEqual(url);

in a test function to set global.window to a copy of the existing window object with Object.create.

Then we add a value to globa.window.location property and set it to an object with the href property set to url with Object.defineProperty.

As a result, the check for window.location.href equal to url in the last line should pass.

Conclusion

To mock window.location.href with Jest and Vuejs, we can set the propert window.location property to a value.

Sometimes, we want to fix the ‘TypeError: window.matchMedia is not a function’ error in Jest tests.

In this article, we’ll look at how to fix the ‘TypeError: window.matchMedia is not a function’ error in Jest tests.

How to fix the ‘TypeError: window.matchMedia is not a function’ error in Jest tests?

To fix the ‘TypeError: window.matchMedia is not a function’ error in Jest tests, we can add a mocked version of the window.matchMedia method.

To do this, we write

describe("Test", () => {
  beforeAll(() => {
    Object.defineProperty(window, "matchMedia", {
      writable: true,
      value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      }))
    });
  });
});

to call Object.defineProperty to add the matchMedia property to window.

We set it to a mocked function that we get by calling jest.fn.

And we call mockImplementation with a function that returns a bunch of properties that are returned by matchMedia like matches, media, onChange, etc.

We mock the methods with jest.fn and set the rest to different fake values.

We put the mock code in the beforeAll callback so it’s called before all tests.

Conclusion

To fix the ‘TypeError: window.matchMedia is not a function’ error in Jest tests, we can add a mocked version of the window.matchMedia method.

In this article, we’ll look at the difference between describe and it in Jest.

What is the difference between describe and it in Jest?

The difference between describe and it in Jest is that describe lets us divide our test suite into sections.

it is called to create individual tests which is used in the describe callback.

For instance, we write

const myBeverage = {
  delicious: true,
  sour: false,
};

describe('my beverage', () => {
  it('is delicious', () => {
    expect(myBeverage.delicious).toBeTruthy();
  });

  it('is not sour', () => {
    expect(myBeverage.sour).toBeFalsy();
  });
});

to compartmentalize our tests with describe, which we create with it.

We call describe to create a test module by calling it with a callback.

And we call it inside the callback to create individual tests.

expect is run in tests to check if the code being tested returns the expected result.

Conclusion

The difference between describe and it in Jest is that describe lets us divide our test suite into sections.

it is called to create individual tests which is used in the describe callback.

Sometimes, we want to make a mock throw an error in Jest.

In this article, we’ll look at how to make a mock throw an error in Jest.

How to make a mock throw an error in Jest?

To make a mock throw an error in Jest, we can call mockImplementation with a function that throws an error.

For instance, we write:

yourMockInstance.mockImplementation(() => {
  throw new Error();
});

to use throw to thrown an error in the mocked implementation of yourMockInstance.

If we’re mocking async functions, we can use mockRejectedValue to mock the value of a rejected promise returned by the async function.

For instance, we write

test('async test', async () => {
  const yourMockFn = jest.fn().mockRejectedValue(new Error('Async error'));

  await yourMockFn();
});

then we should see 'Async error' as the promise rejection message when we call yourMockFn.

Conclusion

To make a mock throw an error in Jest, we can call mockImplementation with a function that throws an error.