Оригинальный адрес:The power of Snapshot Testing
Оригинальный автор:Alex Jover
Переводчик:Дядя Программист Он
Специальная оговорка: эта статья является авторомAlex JoverОпубликовано вVueDoseряд выше.
Авторские права принадлежат автору.
Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать всеобщему прочтению, разрешенные записи будут размещены в конце этой статьи.
текст
Если вы находитесь в бета-версии, вы, вероятно, уже используетеJest: универсальная среда тестирования, созданная Facebook. Сейчас это один из самых популярных фреймворков для тестирования, и я использую его с самого начала.
Вы также можете использоватьEdd Yerburgразвитиеvue-test-utils, которая является официальной библиотекой утилит модульного тестирования, упрощающей наше тестирование.
Вот тестовый пример с использованием Jest и vue-test-utils:
it('has a message list of 3 elements', () => {
const cmp = createCmp({ messages: ['msg-1', 'msg-2', 'msg-3'] })
expect(cmp.is('ul')).toBe(true)
expect(cmp.find('.message-list').isEmpty()).toBe(false)
expect(cmp.find('.message-list').length).toBe(3)
})
it('has a message prop rendered as a data-message attribute', () => {
const cmp = createCmp({ message: 'Cat' })
expect(cmp.contains('.message')).toBe(true)
expect(cmp.find('.message').props('message').toBe('Cat')
expect(cmp.find('.message').attributes('data-message').toBe('Cat')
// Change the prop message
cmp.setProps({ message: 'Dog' })
expect(cmp.find('.message').props('message').toBe('Dog')
expect(cmp.find('.message').attributes('data-message').toBe('Dog')
})
Как показано выше,vue-test-utilsДает нам множество способов проверить реквизиты, классы, контент, поиск и т. д. Кроме того, он предоставляет нам методы для изменения свойств, напримерsetProps, это здорово.
Этот тестовый пример имеет очень явные утверждения:«найдите элемент с именем стиля« сообщение »и проверьте, имеет ли атрибут« сообщение данных »значение« кошка »».
Но если я скажу вам, что с тестированием моментальных снимков вам больше не нужно выполнять вышеуказанную работу.
По сути, вы можете использовать снимки, чтобы переписать предыдущий тестовый случай, следующим образом:
it("has a message list of 4 elements", () => {
const cmp = createCmp({ messages: ["msg-1", "msg-2", "msg-3"] });
expect(cmp.element).toMatchSnapshot();
});
it("has a message prop rendered as a data-message attribute", () => {
const cmp = createCmp({ message: "Cat" });
expect(cmp.element).toMatchSnapshot();
cmp.setProps({ message: "Dog" });
expect(cmp.element).toMatchSnapshot();
});
Результаты теста остаются прежними, и иногда вы можете найти больше контента в своем снимке.
Обратите внимание, что в этом тестовом случае я просто использовал выражение утвержденияtoMatchSnapshotметод, и ничего больше. Это упрощает и ускоряет модульное тестирование, поскольку нам больше не нужно проверять определенные свойства по отдельности.
Наряду с этим изменился и динамический характер модульного тестирования: вместо того, чтобы писать специальные выражения утверждений, мы можем установить компонент в любое желаемое состояние и сделать его снимок.
Снимок означает утверждениесостояние визуализации: они описывают, как компонент отображается при заданном состоянии, а затем делает снимок и проверяет его достоверность в сравнении.
Помните, что не нужно делать «снимок» ваших модульных тестов, чтобы решить, чего вы хотите, а решить, что вы хотите протестировать, чтобы не ставить телегу впереди лошади.
Я много выиграл от такого метода модульного тестирования. Но если вам нужно прочитать, понять, узнать больше, вы можете купить мою книгуTesting Vue.js Components with Jest. На прошлой неделе я добавил целую новую главу, посвященную тестированию снэпшотов, включая следующее:
- Переосмыслите снимки
- Зачем, как и когда использовать снимки
- когда не использовать
- образец кода
Пожалуйста, поделитесь со мной своими мыслями, вы можете найти их в твиттере.я.
Вы можете прочитать это онлайноригинальный, исходный код которого доступен для копирования и вставки. Если вам понравилась эта серия, поделитесь ею с коллегами!
Эпилог
Другие статьи из этой серии будут синхронизированы с выпуском официального сайта серии и будут своевременно переведены и опубликованы в Nuggets. Пожалуйста, продолжайте следить"Программа Обезьяны, дядя Хе", я верю, что принесу вам больше качественного контента, не забудьте поставить лайк~
Если вы хотите узнать больше о переводчике, проверьте следующее:
- личный блог:blog.hadesz.com
- Персональный репозиторий на гитхабе:github.com/hadeshe93
- Личный публичный аккаунт WeChat: поиск «Дядя Он, программист»
Запросить запись авторизации перевода
Если вы считаете, что эта статья хороша, поделитесь ею с друзьями~