Vue-test-utils: Mouting errors

[sybrendotinga]

Version

1.0.0-beta.16

Reproduction link

https://codesandbox.io/s/y0584j4lmj

Steps to reproduce

Run the tests, and you will see the following error (in the console tab):

[Vue warn]: Error in mounted hook: "Error: This is an example error"

What is expected?

I didn't expect to see all the errors in my console (in the terminal it is even more, with a complete stack trace). I would rather not, because all the tests are passing

What is actually happening?

It throws the error, but it does not catch the error

---

I tried some config

import Vue from 'vue'
Vue.config.silent = true

mount(Component, {
  localVue: Vue
})

Additional thoughts

I also thought of silencing jest with --silent, but then no other errors will come trough.

There must be something that I am missing here.

[eddyerburgh]

By default, Vue doesn't throw errors. It catches errors and logs them with console.error.

We decided the test utils should throw when there's an error on mount so you can test a component mounts without errors.

At the moment, we add an error handler to Vue that creates an error, throws it, and adds an error the vm. We use the error property to throw an error after the components has mounted. This works fine.

The problem is, the Vue error handler call is wrapper in a try/catch, so when we throw an error Vue logs the thrown error and the original error. We can fix this by removing the thrown error.

[eddyerburgh]

I've updated the code so that it will only log one error message after mount. If you don't wish to see this you can add a custom error handler by setting Vue.config.errorHandler:

Vue.config.errorHandler = () => {
 // do something
}

[sybrendotinga]

Hi @eddyerburgh, sorry for revisiting this old issue, but I can not seem to figure this one out.

I've updated my sandbox (https://codesandbox.io/s/y0584j4lmj) to the latest version of @vue/test-utils (v1.0.0-beta.24), and I updated the code with (what I assume was) your suggested feedback (in HelloWorld.test.js). But the mount still throws an error to the console. Could you provide a small example of how you can prevent Vue throwing errors to the console?

[amoshydra]

I can't seems to silence the console.error using Vue.config too. localVue.config won't work either because any setting defined in localVue.config seems to be ignored (https://github.com/vuejs/vue-test-utils/issues/489#issuecomment-376879673).

I ended up supressing console.error by mocking it

Example in jest

it('should throw error in createHook', () => {
  const spy = jest.spyOn(global.console, 'error').mockImplementation(() => {});

  try {
    shallowMount(SomeComponent);
  } catch (error) {
    expect(error.message).toBe(SomeComponent.errors.NOT_VALID_PARENT);
  } finally {
    spy.mockRestore();
  }
}

[sybrendotinga]

Thank you @amoshydra for your thoughts and solution! I like sinon a bit more for mocking (for some reason I find myself having a little bit more control over my mocks). I ended up with this solution, based on your solution:

describe("Some component", () => {
  let consoleMock;
  beforeEach(() => {
    consoleMock = sinon.mock(global.console)
      .expects("error").calledWith("")
      .returns(); // This is the part where your implementation is, in this case there is none
  });
  test("to throw an error on mount", () => {
    expect(() => {
      const wrapper = mount(Component, {
        localVue: Vue
      });
    }).toThrowError("This is an example error");
  });
});

See working example: https://codesandbox.io/s/vj152zv175