Skip to content

Buefy issue inside vue-test-utils #982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
EIREXE opened this issue Sep 24, 2018 · 4 comments
Closed

Buefy issue inside vue-test-utils #982

EIREXE opened this issue Sep 24, 2018 · 4 comments
Labels

Comments

@EIREXE
Copy link

EIREXE commented Sep 24, 2018

Version

1.0.0-beta.25

Reproduction link

https://github.com/EIREXE/buefy-bug

Steps to reproduce

  • Install dependencies
  • npm run test:unit

What is expected?

That the test works without any extra error

What is actually happening?

The test errors out (and events such as @click don't work)

    [Vue warn]: Error in created hook: "Error: You should wrap bDropdownItem on a bDropdown"

    found in

    ---> <BDropdownItem>
           <BDropdown>
             <PostItem>
               <Root>

  console.error node_modules/vue/dist/vue.runtime.common.js:1739
    Error: You should wrap bDropdownItem on a bDropdown
        at VueComponent.created (/home/tarda/figuresite/frontend/node_modules/buefy/dist/buefy.js:5471:19)

This is a vue-test-utils exclusive error, so I believe buefy is not to blame here.

@EIREXE
Copy link
Author

EIREXE commented Sep 25, 2018

Forgot to add the particular error, it's done now...

@eddyerburgh
Copy link
Member

eddyerburgh commented Sep 27, 2018

The issue is caused by Vue Test Utils stubbing the Transition component. For now, you can fix the error by telling Vue Test Utils not to stub Transition:

const msg = 'new message'
const wrapper = mount(HelloWorld, {
  propsData: { msg },
  stubs: {
    transition: false
  }
})
expect(wrapper.find({ ref: 'a1b' }))

Unfortunately this means you will sometimes need to use Vue.nextTick to wait for the Transition component to re render:

it('renders props.msg when passed', (done) => {
  const wrapper = mount(HelloWorld, {
    stubs: {
      transition: false
    }
  })
  expect(wrapper.find({ ref: 'a1b' }))
  wrapper.trigger('click')
  Vue.nextTick(() => {
    assert(wrapper.text()).toBe('some text')
    done()
  })
})

This bug with the Transition stub will probably be fixed in the future after Vue 2.5.18 is released, by removing the Transition stub when Vue is running in sync mode.

Alternatively we could fix the TransitionStub component stub to stop the error.

@EIREXE
Copy link
Author

EIREXE commented Sep 27, 2018

That appears to fix it, thank you for providing a workaround in the meantime!

@eddyerburgh
Copy link
Member

This is the same issue reported in #958, so I'll close this in favor of that issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants