Skip to content

Fix CE specs for updating Jest 26 -> 27

Vitaly Slobodin requested to merge vs/update-jest-27-ce-specs into master

What does this MR do and why?

Most problems come due to a breaking change in Jest 27 and new fake timers implementation. Additional extra tick happens between Jest event hook. For instance, if our test validates the component loading state and we create a component in "beforeEach" hook the loading state will go away due to an extra tick in between "beforeEach" and "it" blocks.

The test below will fail in Jest 27 due to the mentioned extra tick.

beforeEach(() => {
  createComponent();
});

it('renders the loading icon', () => {
  expect(findLoadingIcon().isVisible()).toBe(true); // fails
});

Unfortunately there is no solution for that except for moving everything to the it block:

beforeEach(() => {
  createComponent();
});

it('renders the loading icon', () => {
  createComponent();

  expect(findLoadingIcon().isVisible()).toBe(true); // passes
});

Another problem is changed Jest matchers for string and numbers. Jest 27 validates the type by default when we use matchers like "toContain", "toBe". The solution is to call "toString" function on expected values as VTU and Vue.js in general renders everything as strings.

const expectedEpicId = 1;

it('renders an epic ID', () => {
  expect(wrapper.find(EpicID).text()).toBe(expectedEpicId); // fail because text() returns a string
});

Screenshots or screen recordings

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Vitaly Slobodin

Merge request reports