vue-test-utils v1.0.0-beta.22 broke my tests

[sobolevn]

Version

1.0.0-beta.22

Reproduction link

wemake-services/wemake-vue-template#688

Steps to reproduce

1. create a store
2. mount a component with a store
3. try to access a store on a instance of vm

What is expected?

I expect that everything will still be working as it used to

What is actually happening?

I does not work. Raising this error:

RUNS  ...
  ● unit tests for Comment component › should increment rating
    TypeError: Cannot read property 'commit' of undefined
      55 |     const wrapper = mount(Comment, { store, localVue, propsData: { comment } })
      56 | 
    > 57 |     wrapper.vm.$store.commit(types.UPDATE_RATING, {
         |                       ^
      58 |       commentId: comment.id,
      59 |       delta
      60 |     })
      at Object.test (tests/components/comment.spec.js:57:23)

---

Here's the full test code: https://github.com/wemake-services/wemake-vue-template/blob/master/template/tests/components/comment.spec.js#L53-L68

[eddyerburgh]

Sorry about this.

The issue is that we changed code that broke behavior for components created with Vue.extend. I've reverted the changes and added a test to make sure this doesn't happen again. It should be fixed in beta.23.

[sobolevn]

Thanks, for the quick response!

That's what CI and @dependabot are for 😄

[sobolevn]

Now I have a different thing:

console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:15
    [vue-test-utils]: an extended child component <ActionBar> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:15
    [vue-test-utils]: an extended child component <Comment> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.

And then this failure:

RUNS  ...
  ● unit tests for Index page › should match the snapshot
    expect(value).toMatchSnapshot()
    Received value does not match stored snapshot "unit tests for Index page should match the snapshot 1".
    - Snapshot
    + Received
    @@ -1,6 +1,6 @@
    - "<main><div><div class="logo"><h1><a href="https://github.com/wemake-services/wemake-vue-template">
    + "<main comments="[object Object],[object Object],[object Object]"><div><div class="logo"><h1><a href="https://github.com/wemake-services/wemake-vue-template">
            wemake-vue-template
          </a></h1> <h2><a href="https://wemake-services.gitbook.io/wemake-vue-template/">
            documentation
          </a></h2></div> <div class="actions"><button class="reload">reload comments</button></div> <section class="container"><div class="commentComponent commentNegative"><p class="author">Kane_Greenfelder@gmail.com</p> <p class="body">Exercitationem voluptatibus error quaerat porro error sint aut aliquid qui. Minus officiis neque dolorem animi maiores et aliquid. Dolorem beatae et molestiae consequatur sed rerum qui voluptates unde.</p> <div class="rating"><button class="ratingUp">
            +
      65 |   test('should match the snapshot', () => {
      66 |     const wrapper = mount(Index, { store, localVue, propsData: { comments } })
    > 67 |     expect(wrapper.html()).toMatchSnapshot()
         |                            ^
      68 |   })
      69 | })
      70 | 
      at Object.test (tests/views/index.spec.js:67:28)

Link: https://travis-ci.org/wemake-services/wemake-vue-template/builds/410609038?utm_source=github_status&utm_medium=notification

[eddyerburgh]

Yes the snapshot has changed because of this PR- #834 I'll update the changelog to make it clear this is a breaking change

…

On Wed, 1 Aug 2018, 08:54 Nikita Sobolev, ***@***.***> wrote: Now I have a different thing: console.error ***@***.***/test-utils/dist/vue-test-utils.js:15 [vue-test-utils]: an extended child component <ActionBar> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option. console.error ***@***.***/test-utils/dist/vue-test-utils.js:15 [vue-test-utils]: an extended child component <Comment> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option. And then this failure: RUNS ... ● unit tests for Index page › should match the snapshot expect(value).toMatchSnapshot() Received value does not match stored snapshot "unit tests for Index page should match the snapshot 1". - Snapshot + Received @@ -1,6 +1,6 @@ - "<main><div><div class="logo"><h1><a href="https://github.com/wemake-services/wemake-vue-template"> + "<main comments="[object Object],[object Object],[object Object]"><div><div class="logo"><h1><a href="https://github.com/wemake-services/wemake-vue-template"> wemake-vue-template </a></h1> <h2><a href="https://wemake-services.gitbook.io/wemake-vue-template/"> documentation </a></h2></div> <div class="actions"><button class="reload">reload comments</button></div> <section class="container"><div class="commentComponent commentNegative"><p ***@***.***</p> <p class="body">Exercitationem voluptatibus error quaerat porro error sint aut aliquid qui. Minus officiis neque dolorem animi maiores et aliquid. Dolorem beatae et molestiae consequatur sed rerum qui voluptates unde.</p> <div class="rating"><button class="ratingUp"> + 65 | test('should match the snapshot', () => { 66 | const wrapper = mount(Index, { store, localVue, propsData: { comments } }) > 67 | expect(wrapper.html()).toMatchSnapshot() | ^ 68 | }) 69 | }) 70 | at Object.test (tests/views/index.spec.js:67:28) Link: https://travis-ci.org/wemake-services/wemake-vue-template/builds/410609038?utm_source=github_status&utm_medium=notification — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#877 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMlbW8KUWNSu40etoY4rLa0hWohss-2Pks5uMV6vgaJpZM4VmAy0> .