#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