Эй, ребята! Сегодня поговорим о платформе для юнит-тестирования JavaScript Jest. В нашей компании мы недавно начали использовать его для тестирования новых проектов. Я нашел его довольно крутым по крайней мере по нескольким причинам:

  • снимки хороши для тестирования компонентов React
  • код более компактный
  • отчеты очень дружелюбны

Отображение настраиваемых сообщений об ошибках

Но недавно я застрял с одним тестом. Мне нужно было отобразить настраиваемое сообщение об ошибке. Я помню, что в Чай у нас есть возможность передать собственное сообщение об ошибке в качестве второго аргумента функции expect (например, там). Но как это реализовать с помощью Jest? Я решил google этот вопрос. Но поскольку Jest - довольно новый инструмент, я буквально ничего не нашел о настраиваемых сообщениях об ошибках. Так что мне потребовалось время, чтобы понять это.

Я нашел один способ (возможно, есть и другие, поделитесь в комментариях), как отображать пользовательские ошибки. Это описано в Jest docs здесь, но не совсем очевидно.

Позвольте мне в качестве примера показать вам один простой тест:

test('every number should be an integer', () => {
  const numbers = [1, 2, "3", 4, 5];
  numbers.forEach(n => {
    expect(Number.isInteger(n)).toBeTruthy();
  });
});

После выполнения этого теста Jest сообщит о следующей ошибке:

expect(received).toBeTruthy()
Expected value to be truthy, instead received false

Но было бы неплохо показать тестеру информацию о точном «номере», который вышел из строя, и каков его индекс в массиве. Для этого мы могли бы extend наш expect метод и добавить наш собственный сопоставитель. Назовем его toBeTruthyWithMessage, и код будет выглядеть так:

test('every number should be an integer', () => {
  expect.extend({
    toBeTruthyWithMessage(received, errMsg) {
      const result = {
        pass: received,
        message: () => errMsg
      };
      return result;
    }
  });
  
  const numbers = [1, 2, "3", 4, 5];
  numbers.forEach((n, i) => {
    const errMsg = `Array contains non-integer value "${n}" (index: "${i}")`;
    expect(Number.isInteger(n)).toBeTruthyWithMessage(errMsg);
  });
});

Если мы запустим этот тест, мы получим гораздо более приятную ошибку:

Array contains non-integer value "3" (index: "2")

Думаю, вы согласитесь, что это сообщение намного полезнее в нашей ситуации и поможет отладить наш код намного быстрее.

Проверка неизменности

Еще один пример использования собственных сопоставителей. Я хочу показать вам в основном свой тестовый пример (но немного упрощенный), в котором я застрял.

test('should be equal to true', () => {
  expect.extend({
    toBeTruthyWithMessage(received, errMsg) {
      const result = {
        pass: received,
        message: () => errMsg
      };
      return result;
    }
  });
  
  const firstArray = [{}, {}, {}];
  const secondArray = [firstArray[0], {}, firstArray[2]];
  
  firstArray.forEach((e, i) => {
    const errMsg = `
      Objects are different.
      First value: ${JSON.stringify(e)}
      Second value: ${JSON.stringify(secondArray[i])}
      Index: ${i}
    `;
    expect(e === secondArray[i]).toBeTruthyWithMessage(errMsg);
  });
});

Здесь мы можем проверить объект на неизменяемость, является ли он тем же самым объектом или нет. После выполнения примера Jest выдает нам это красивое и довольно подробное сообщение об ошибке:

Objects are different.
First value: {}
Second value: {}
Index: 1

Вывод

Как я уже сказал выше, вероятно, есть и другие варианты отображения пользовательских сообщений об ошибках. Если вы что-то знаете или хотите добавить, пожалуйста, поделитесь своими мыслями в комментариях. Спасибо за чтение и хорошего дня / ночи / времени!