Unhandled Rejection Error on Test Case After Updating from Vue Test Utils v1 to v2

[SCreutzburg]

Hello,

I recently updated my test framework from Vue Test Utils v1 to Vue Test Utils v2. After the update, I am facing an issue with one of my test cases. Here is the test case:

test('handle error message', async() => {
  const testError = 'Test error';

  Calculator.getTravelPrice.mockImplementation(() => {
    return Promise.reject(new Error(testError));
  });

  const travelStart = new Date('2023-06-01').toISOString();
  const travelEnd = new Date('2023-06-12').toISOString();

  await setTravelPeriod(wrapper, travelStart, travelEnd);

  const button = wrapper.find('button');

  await button.trigger('click');
  await flushPromises();

  expect(wrapper.text()).contains('xxx');
});

Since the upgrade, I am getting this error: Vitest caught 1 unhandled error during the test run. This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected. Unhandled Rejection Error: Test error

The error is triggered when the calculate function is called by the click event. The calculate function has a catch block that throws an error (i.e., throw(e)). This is causing the test error, but this only started happening after the upgrade to Vue Test Utils v2. The throw(e) in the catch block is essential for our application and cannot be removed.

Here is the calculate function for reference:

async function calculate(event: Event|null = null) {
  // function body
  try {
    // some code
  } catch (e) {
    prices.calculated = false;
    message.value = 'Der Preis konnte nicht berechnet werden.';
    prices.invalid = true;
    invalid.value = false;
    throw (e);
  } finally {
    loading.value = false;
  }
}

I would appreciate any guidance on how to resolve this issue. Thank you.

[freakzlike]

Hi @SCreutzburg,
you probably need to wrap the calculate function before mounting it to the click event on the button and catch the error again. In case you want to print the error into the log you can do console.error(e); instead.

[SCreutzburg]

Thank you for your response. However, the throw(e) in the catch block of the calculate function is necessary for our application. This is because we need to propagate the error outside of the component being tested to handle it appropriately at a higher level.

The error is part of our application flow, and removing or simply logging it would disrupt this flow. Hence, it's crucial for us to keep the throw(e).

I would appreciate any alternative solutions or workarounds that would allow us to test our component effectively without modifying this essential part of our error handling. Thank you.

[freakzlike]

So I guess you are using the app.config.errorHandler, right?
If you provide a small repro, I could try some ideas https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

[SCreutzburg]

Thank you for your guidance. You are correct in your assumption that we are using the app.config.errorHandler in our application. However, we need to discuss this issue internally with my team first. The transition from Vue 2 to Vue 3 has led to changes in the way we handle errors, including modifications to the errorHandler. We will review our current setup and consider the best way to handle this moving forward. We appreciate your patience and will get back to you as soon as we have an update. Thank you.