Jest — это фреймворк для тестирования JavaScript, созданный Facebook. Он имеет встроенные утилиты запуска тестов, оценщика тестов и утверждений. Это удивительный фреймворк для тестирования ваших приложений, будь он написан на React, Angular или Vue. В этой статье я объясню, что такое функция Снимок в Jest, и покажу интересный пример использования, который может упростить и ускорить ваше тестирование.
Что такое Снапшот?
Как следует из названия, это в основном снимок вывода, который вы хотите сравнить с течением времени и проверить, соответствует ли код ожиданиям. Например, допустим, вы написали компонент React, который отображает некоторый пользовательский интерфейс. Со временем над ним работают разные люди и меняют вывод пользовательского интерфейса. Это сохраняется в виде текста, как показано ниже, и простое сравнение текстовых выходных данных может сказать, дает ли код правильный вывод. Основной интерес этой функции состоит в том, чтобы сделать тестирование более простым и безболезненным, проверяя цели вашего приложения для отображения определенного пользовательского интерфейса и не беспокоясь о реализации.
Хотя этот моментальный снимок широко используется для тестирования компонентов React, вы можете использовать его для тестирования любого вывода, который можно сериализовать, например объектов или json.
Дело
Допустим, у вас есть файл конфигурации, экспортирующий различные значения, как показано ниже:
// config.js export const APP_NAME = 'MY_APP'; export const APP_MAIN_ROUTE = 'app/main'; export const APP_USER_ROUTE = 'app/user';
Раньше я писал тест, который импортировал все эти параметры и выполнял отдельные утверждения, или писал некоторую логику-оболочку, чтобы заставить его работать с одним утверждением. Но со снимком Jest все намного проще, как показано ниже:
// config.test.js
import * as constants from '<source-file-path>';
test('constants matches snapshot', () => {
expect(constants).toMatchSnapshot();
});
При первом запуске он создаст файл моментального снимка, как показано ниже, и будет сравниваться с ним при последующих запусках.
// config.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`constants matches snapshot 1`] = `
Object {
"APP_NAME": "MY_APP",
"APP_MAIN_ROUTE": "app/main",
"APP_USER_ROUTE": "app/user",
}
`;
Если у вас есть очень большой вложенный объект (возможно, объект конфигурации), вы можете протестировать его с помощью снимка с помощью одной строки. Можно избежать большого количества кода, связанного с утверждением или реализацией. Обязательно попробуйте это и дайте мне знать ваши мысли в комментариях.
Большое спасибо за прочтение. Пожалуйста, дайте мне знать, как вы себя чувствовали, и если вы хотите услышать больше по какой-либо теме, не забудьте сообщить мне об этом в комментариях. Хорошего дня!
