Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Testing Vue.js Components

Get access to this course, 18 others, and future Vue.js courses!

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"
]