Testing Vue.js Components
🚧 PLEASE NOTE: An updated version of this course is available! see the Rapid Testing with Vitest: Master Unit Testing & Mocking course. This course is outdated!

The Wrapper Object

In this lesson, we’ll learn about the wrapper object, and how we can access the component through the vm property, as we would when we're tinkering with our components in the browser console.

Amongst other things, this allow us to easily get and set our component data when testing them.

This lesson also explains why the snapshots are so easy to read. This is thanks to the jest-serializer-vue package.

The package was provided with the boilerplate. If you wish to use it in your own projects, you’ll have to install it:

Install jest-serializer-vue

yarn add --dev jest-serializer-vue
# OR
npm install --save-dev jest-serializer-vue

Then add this to your jest.config.js

snapshotSerializers: [
  "<rootDir>/node_modules/jest-serializer-vue"
]