Are actions somehow async under the hood?

[bmacher]

I have a notification component in my app, that reacts on changes in the store. Therefore if the state visible changes to true the notification will be shown. This is my action:

/**
 * Show notification of certain type with message.
 */
showNotification(message: string) {
  this.$patch({ visible: true, message });
},

I am testing my components with @testing-library/vue. And when I used Vuex before I had to await the action before I could check, whether the notification is visible or not. Actions of pinia do not return Promises at least Typescript is telling so. However when I do the following it doesn't work:

it('should show the notification message', () => {
  const message = 'Hello World';

  const { queryByText } = renderComponent(Notification);
  notificationStore.showNotification(message) // returns void;

  expect(queryByText(message)).toBeInTheDocument();
});

But it works when I do:

it('should show the notification message', async () => {
  const message = 'Hello World';

  const { queryByText } = renderComponent(Notification);
  await notificationStore.showNotification(message) // returns void;

  expect(queryByText(message)).toBeInTheDocument();
});

I was wondering why it behaves like this. Could you help me with this?

[posva]

I think you need to wait one tick (nextTick) for the component to render.

In pinia, actions are async if you make them async. They're not always wrapped with a promise like in Vuex

[bmacher]

That's a good idea. However, do you know why it works with async/await then? Can I simple use Vue.nextTick() in this case?

Anyways, thanks! 🙋‍♂️

[posva]

Because it forces a tick that ends up allowing Vue to render again

Yes