Один из лучших способов правильного использования моментальных снимков - зафиксировать их, чтобы другие пользователи могли анализировать в коде изменения, внесенные вами в ожидаемый результат.
Для того, чтобы этот процесс работал плавно, ваши снимки должны иметь чистый и легко читаемый результат, чтобы другие пользователи могли легко увидеть и идентифицировать внесенные изменения.
Ранее я уже упоминал о некоторых передовых методах работы с реагирующими компонентами.
Но если вы используете снимки для тестирования чего-то другого, кроме реагирующего компонента, вы также можете внести некоторые улучшения, чтобы улучшить читаемость ваших снимков.
Вы можете настроить и отформатировать вывод снимка, чтобы сделать его более читаемым с помощью сериализаторов снимков (обратите внимание, что сериализаторы снимков доступны в Jest 19+).
Рассмотрим следующий пример:
var ToDos = [
{ 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' },
{ 'Id': '2', 'Title': 'Go to gym', 'Status': 'pending' },
{ 'Id': '3', 'Title': 'Kill it with fire', 'Status': 'done' },
{ 'Id': '4', 'Title': 'Take snapshots', 'Status': 'done' },
{ 'Id': '5', 'Title': 'Be awesome', 'Status': 'pending' },
];
function filterTodos(arr, key, term) {
return arr.filter(function(obj) {
return obj[key] === term
});
}
test('it returns all todos with matching Id',() =>{
expect(filterTodos(ToDos,'Id', '1')).toMatchSnapshot()
})
test('it returns all todos with matching Title',() =>{
expect(
filterTodos(ToDos,'Title', 'Shop groceries')).toMatchSnapshot()
})
test('it returns all todos with matching Status',() =>{
expect(filterTodos(ToDos,'Done', 1)).toMatchSnapshot()
})
В результате будет получен следующий снимок:
exports[`it returns all todos with matching Id 1`] = `
Array [
Object {
"Id": "1",
"Status": "done",
"Title": "Shop groceries",
},
]
`;
exports[`it returns all todos with matching Status 1`] = `
Array [
Object {
"Id": "1",
"Status": "done",
"Title": "Shop groceries",
},
Object {
"Id": "3",
"Status": "done",
"Title": "Kill it with fire",
},
Object {
"Id": "4",
"Status": "done",
"Title": "Take snapshots",
},
]
`;
exports[`it returns all todos with matching Title 1`] = `
Array [
Object {
"Id": "1",
"Status": "done",
"Title": "Shop groceries",
},
]
`;
Затем мы можем "усовершенствовать" этот вывод с помощью сериализатора:
expect.addSnapshotSerializer({
test:(val) => val.Id && val.Title && val.Status && val.expiration,
print:(val) => `ID: ${val.Id}
Title: ${val.Title}
Status: ${val.Status}
Expiration: ${val.expiration}`
})
И тогда ваш результат должен быть:
// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`it returns all todos with matching Id: 1 1`] = ` Array [ ID: 1 Title: Shop groceries Status: done Expiration: 23/03/17 , ] `; exports[`it returns all todos with matching Status: done 1`] = ` Array [ ID: 1 Title: Shop groceries Status: done Expiration: 23/03/17 , ID: 3 Title: Kill it with fire Status: done Expiration: 23/03/17 , ID: 4 Title: Take snapshots Status: done Expiration: 23/03/17 , ] `; exports[`it returns all todos with matching Title: Shop groceries 1`] = ` Array [ ID: 1 Title: Shop groceries Status: done Expiration: 23/03/17 , ] `;
Как создать сериализатор?
Функция 'addSnapshotSerializer' предоставляет вам доступ к двум обратным вызовам 'test' и ' print ', которые получают каждое из значений, возвращаемых вашими тестовыми примерами.
В обратном вызове ‘test’ вы можете создать условие для использования сериализатора, например наличие заданного набора значений. А в callbak ‘print’ вы можете отформатировать вывод снимка, используя каждое из значений по своему усмотрению.
Я не нашел много документации по созданию сериализаторов, но, похоже, это удобный инструмент при работе с более сложными снимками.
Это отличный пример использования сериализатора снимков:
Это тест для алгоритма двоичного дерева поиска, который выводит и сравнивает результаты теста как реальное дерево, вы можете проверить источник по адресу: https://github.com/jiayihu/pretty-algorithms
Ресурсы:
