Vue-test-utils: Improve error handling of stubs option

[iztsv]

Version

1.0.0-beta.12

Reproduction link

https://github.com/ilyaztsv/jest-and-vue-test-utils-stubs

Steps to reproduce

• npm i
• npm run test

What is expected?

tests should end successfully and terminal console should contain html of rendered MyComponent:

./component.spec.js
  MyComponent
    ✓ should create (15ms)
    ✓ snapshot (27ms)

  console.log component.spec.js:27
    <div class="component"><child-component></child-component></div>

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        2.423s

What is actually happening?

    ✓ should create (12ms)
    ✕ snapshot (27ms)

  ● MyComponent › snapshot

    RangeError: Maximum call stack size exceeded

      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4540:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.172s

[eddyerburgh]

The problem is you're stubbing the stub with itself, which leads to a circular reference.

You can fix your tests by passing an element, or true in the stubs object:

stubs: {
  'child-component': '<div />',
  'child-component': true
}

We should throw a more useful error, and make it clear in the docs that you need to pass either string HTML tag, Component object, or Boolean. I'll keep this issue open to make sure we improve the error handling and docs.

[iztsv]

@eddyerburgh thank you for the replay.

I've found out one interesting thing that if I use Component decorator from vue-class-component for my components, stubs works fine even if I'am stubbing the stub with a stub.

Please see the repo above:

Reproduction link

https://github.com/ilyaztsv/jest-and-vue-test-utils-stubs

Steps to reproduce

• git checkout with-vue-class-component
• npm i
• npm run test

Result

 FAIL  ./my-component.spec.js
  ● MyComponent › snapshot

    RangeError: Maximum call stack size exceeded

      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4540:7)

 PASS  ./my-component-class.spec.js
  ● Console

    console.log my-component-class.spec.js:24
      <div><h1>MyComponentClass</h1> <child-component-class></child-component-class></div>

[iztsv]

@eddyerburgh Hello!

Do you have any news about the message above? 😃

[eddyerburgh]

So the problem you posted is that your registering a stub component that should render the component you're trying to stub. When Vue tries to resolve the component it gets stuck in an infinite loop:

child-component renders child-component which renders child-component, which renders child-component etc.

I'm not sure why because I haven't seen the code, but in your second example, Vue will not be getting stuck in the loop because it can resolve the component without getting caught in a loop.

[iztsv]

Thanks!
So, I close the issue and will try to send PR for #410 in order to get functionality for my goals 😄

[iztsv]

Sorry. I reopen the issue because:

I'll keep this issue open to make sure we improve the error handling and docs.