#37 - Snapshot Testing - Vue 3 (Options API) Tutorial

In this Vue 3 tutorial, we learn how to compare two images of an application with snapshot testing. We cover how to write and compare snapshots with Jest, how to update an older snapshot and how to use mocked data in a test.

We cover the following topics:
1. Lesson Project
2. What is Snapshot Testing
3. How to write a snapshot test with Jest
4. How to update a snapshot
5. How to use mocked data in a snapshot test

_Note that this tutorial is for the Vue 3 Options API (which is similar to Vue 2). We later move on to the Composition API and then the Script Setup (3.2 update)_

Jest Test Runner
https://jestjs.io/

Jest Snapshot Documentation
https://jestjs.io/docs/expect#tomatchsnapshotpropertymatchers-hint

Jest VSCode Extension
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

Vue CLI Unit Jest Plugin
https://cli.vuejs.org/core-plugins/unit-jest.html

Vue Jest
https://github.com/vuejs/vue-jest

Vue Testing Utilities
https://next.vue-test-utils.vuejs.org/

This lesson is also available in written format
https://www.koderhq.com/tutorial/vue/snapshot-test/

Check out the Vue 3 for Beginners playlist for more Vue tutorial videos
https://www.youtube.com/playlist?list=PLFAU47Id44XG48v5dPPTGMgJfjMnsU8Bw

Subscribe to the channel and never miss a lesson
https://www.youtube.com/channel/UCz6k9pRLevdJGAsMMAVSb_Q?sub_confirmation=1

Visit the website for a wide range of programming tutorials
https://www.koderhq.com