@outcome-co/jest-serializer-vue v1.4.1

jest-serializer-vue-js

A simplified version of jest-serializer-vue-tjw that allows you to stringify both attrs and props.

Installation

npm install --save-dev @outcome-co/jest-serializer-vue

Usage

You need to add the serializer to your Jest config.

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

Then just use .toMatchSnapshot('snapshot name') in your tests.

Example

import { shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent.vue', () => {
  describe('Created', () => {
    test('Renders correctly with default props', () => {
      const wrapper = shallowMount(MyComponent)

      expect(wrapper).toMatchSnapshot()
    })
  })
})

Settings

In your vue.config.js file:

module.exports = {
  pluginOptions: {
    jestSerializer: {
      // All available formatting options: https://github.com/beautify-web/js-beautify/blob/master/js/src/html/options.js
      formatting: {
        indent_char: ' ',
        indent_inner_html: true,
        indent_size: 2,
        inline: [],
        sep: '\n',
        unformatted: ['code', 'pre']
      },
      stringify: false
    }
  }
}

Development

Remember to run ./pre-commit.sh when you clone the repository.