search

vuejs / vue-test-utils-mocha-webpack-example

Example project using mocha-webpack and vue-test-utils
104 stars 48 forks source link

MessageToggle.vue test failed #4

Closed 404157386 closed 6 years ago

404157386 commented 6 years ago

Hello, i run the code, but the test can't pass 100%, this is the error log:

MessageToggle.vue 1) toggles msg passed to Message when button is clicked

3 passing (35ms) 1 failing

1) MessageToggle.vue toggles msg passed to Message when button is clicked: Error: [vue-test-utils]: find did not return Component, cannot call hasProp() on empty Wrapper at throwError (node_modules_vue-test-utils@1.0.0-beta.11@vue-test-utils\dist\vue-test-utils.js:11:9) at ErrorWrapper.hasProp (node_modules_vue-test-utils@1.0.0-beta.11@vue-test-utils\dist\vue-test-utils.js:602:3) at Context.it (.tmp\mocha-webpack\1519815705782\webpack:\test\MessageToggle.spec.js:12:1) at callFn (node_modules_mocha@3.5.3@mocha\lib\runnable.js:348:21) at Test.Runnable.run (node_modules_mocha@3.5.3@mocha\lib\runnable.js:340:7) at Runner.runTest (node_modules_mocha@3.5.3@mocha\lib\runner.js:443:10) at node_modules_mocha@3.5.3@mocha\lib\runner.js:549:12 at next (node_modules_mocha@3.5.3@mocha\lib\runner.js:361:14) at node_modules_mocha@3.5.3@mocha\lib\runner.js:371:7 at next (node_modules_mocha@3.5.3@mocha\lib\runner.js:295:14) at Immediate. (node_modules_mocha@3.5.3@mocha\lib\runner.js:339:5)

404157386 commented 6 years ago

if the shallow render doesn't load child component Message.vue? i try to use mount, but also hint error -- wrapper.hasProp() must be called on a Vue instance. bcoz Message.vue is a functional component?

eddyerburgh commented 6 years ago

This package is using an old version of vue-test-utils. I'll look into it later today

404157386 commented 6 years ago

Hello, I hvae a question: At MessageToggle.vue, Message is a child component ,

I want to get its props by wrap.find , but it's not a Vue instance, can't use wrapper.props() with latest version vue-test-utils... How can I do this?

    const wrapper = shallow(MessageToggle)
    const button = wrapper.find('#toggle-message')

    const MessageComponent = wrapper.find(Message)
    expect(MessageComponent.hasProp('msg', 'message')).toBe(true) _//can't get props for it's not vue instance_

If a component import any child component, should i test child? It's still unit test?

eddyerburgh commented 6 years ago

This is only an issue for functional components. We changed how we treat functional components under the hood in the latest version, so it's not possible to check the props on a functional component. This is a bug that will be fixed in the next version 👍

You can still check child components in the way demonstrated in this repo for all other types of components

eddyerburgh commented 6 years ago

I've updated the code to use a non-functional component