render objects

[dcrystalj]

problem

passing object to prop of one component should be serialized

example

serializing following component:

<template>
<div>
 <custom-component :data="{a: true}">
</div>
</template>

gives you somehting like this:

exports[`InstantOrderForm snapshot renders 1`] = `
<div>
 <custom-component-stub data="[object Object]">
</div>

solution

can this be fixed? am I doing something wrong? I would like to keep data="{a: true}" in snapshot

[TheJaredWilcurt]

@dcrystalj This was a great request. It was also a huge pain in the ass to get to work. But here I am, 1am publishing to npm.

• https://www.npmjs.com/package/jest-serializer-vue-tjw

// this will work
expect(wrapper)
  .toMatchSnapShot();

// this will not, the `[object Object]` is already in place
expect(wrapper.html())
  .toMatchSnapshot();

The feature is experimental, so create issues if you have problems with it. You will need to enable it in your vue.config.js file.

module.exports = {
  pluginOptions: {
    jestSerializer: {
      stringifyObjects: true
    }
  }
};

[edfowle]

+1 for this feature request, are there any plans to merge in @TheJaredWilcurt's work?

[eddyerburgh]

I'm quite busy at the moment (my first son was born a few months ago) but I'm happy to review and merge PRs