Skip to content
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

Bug: Errors in setup/mount throw and do not return a wrapper #1899

Closed
twoBoots opened this issue Dec 7, 2022 · 3 comments
Closed

Bug: Errors in setup/mount throw and do not return a wrapper #1899

twoBoots opened this issue Dec 7, 2022 · 3 comments
Labels
bug Something isn't working needs reproduction

Comments

@twoBoots
Copy link

twoBoots commented Dec 7, 2022

Describe the bug

#1845 merged and released in v2.2.2 as a workaround for a reactivity issue with errors during mount in Vue. This causes errors during component mount to throw and not return a wrapper by intercepting the expected error handler.

This prevents the ability to test error handling strategies for larger Vue projects that manage when errors occur in subcomponents and use fallback components.

To Reproduce

it('displays error messages from setup errors', async () => {
  const theError = new Error('very bad things happened out of our control');

  const ErrorSubComponent = defineComponent({
    setup() {
      throw theError;
    },
    template: '<div>I load external data from flaky provider</div>',
  });
  const ParentWithErrorSubComponent = defineComponent({
    components: { ErrorSubComponent },
    template: `
      <div>
        <h1>parent content</h1>
          <ErrorHandlerSafeguard>
            <ErrorSubComponent />
            <div>inner content</div>
          </ErrorHandlerSafeguard>
        <footer>parent footer</footer>
      </div>
    `,
  });

  wrapper = mount(ParentWithErrorSubComponent, {...configWithErrorSafeguardPlugin}); // <--- throws

  expect(wrapper.text()).toContain('parent content');
  expect(wrapper.text()).toContain('parent footer');
  expect(wrapper.text()).toContain('SAFEGUARD DEFAULT OOPS MESSAGE WITH DINOSAUR GAME');
  expect(wrapper.text()).toContain('error details: very bad things happened out of our control');

  expect(wrapper.text()).not.toContain('inner content');
  expect(wrapper.text()).not.toContain('I load external data');
});

Expected behaviour

A wrapper is returned with the mounted component, or a configuration option added to mount to determine whether to intercept error handlers and throw errors, or return the wrapper.

Related information:

  • @vue/test-utils version: 2.2.2

Additional context

I'm happy to put a PR together to add this configuration option.

@twoBoots twoBoots added the bug Something isn't working label Dec 7, 2022
@cexbrayat
Copy link
Member

Hi @twoBoots
Thanks for the repro. We are aware of this issue (this is similar to #1870)

@xanf mentioned he was taking a look in #1870 (comment) so we'll hopefully have a fix soon

@cexbrayat
Copy link
Member

@twoBoots I wanted to check if that's still an issue, but I can't run your reproduction
Can you check if that's still the case with the latest VTU version?
If it doesn't work, can you provide us a small repro online using https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue?initialPath=__vitest__ ?

@cexbrayat
Copy link
Member

Let's close this as we've not heard back from the OP

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs reproduction
Projects
None yet
Development

No branches or pull requests

2 participants