MSW needs multiple flushPromises()

[simeon-petrov-5]

Hello everybody 🙂 I have kind of "strange" behavior when we use MSW for mocking the rest calls - we need to use multiple await flushPromises() so the component is correctly mounted. We are using Vitest, but this is an issue other colleagues have faced with Vue 2 + Jest.

Although having 2 or 3 flushPromises isn't a deal breaker, the amount of calls is always different and we can't really have a stable testing experience... Why exactly do we have such behaviour and a single await flushPromises isn't enough? Is this something from vue-test-utils side or strictly msw related?

I've uploaded an example project with this here https://github.com/simeon-petrov-5/vue-testing-script-setup
I found that other people also had such experience discussed at MSW, but no answer was found mswjs/msw#988

Component example

<script setup lang="ts">
  const isLoading: Ref<boolean> = ref(true);
  const caracters: Ref<any[]> = ref([]);

  onBeforeMount(async () => {
    const resp = await axios.get('https://rickandmortyapi.com/api/character');
    caracters.value = resp.data.results;
    isLoading.value = false;
  });
</script>

Test example

export const restHandlers = [rest.get('https://rickandmortyapi.com/api/character', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(mockedCharacters));
})];

const server = setupServer(...restHandlers);
const createWrapper = () => {
  return mount(LoadingAxios);
};

describe('LoadingAxios.vue', () => {
  beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
  afterAll(() => server.close());
  afterEach(() => server.resetHandlers());

  it('should match snapshot', async () => {
    const wrapper = createWrapper();

    await flushPromises();
    await flushPromises();
    await flushPromises();

    expect(wrapper.element).toMatchSnapshot();
  });
});

Workarounds I found are

• remove MSW and use something like mock-axios-adapter - a single await flushPromises() is all we need and works as I would expect
• I found an article from Jessica Sachs, where she shows a "waiting" mechanism that works fine in my project https://jess.sh/blog/stop-writing-next-tick#the-retry-implementation

I would be very thankful if someone had such situation and/or can shine some light ^^ If this is "normal" I guess a comment for MSW usage with this retry-implementation from the article will be helpful for others too.

[Xa3lis]

Have the same behavior, any idea ?

[wobsoriano]

Yeah for now I'm using https://github.com/sindresorhus/p-wait-for too

[simeon-petrov-5]

So in the last 2 weeks there were discussions about this in couple of different places, so for anybody interested here are some links:

• flushPromises from vue-test-utils must be called multiple times mswjs/msw#1163
• Helpers: nextTick/flushPromises #137 (comment)

So in short - this isn't changing on MSW's side, probably we're going to get something like waitFor from test-utils. Until then I still use the "workaround" for creating my own waitFor mechanism like in Jess' article (last link in the post)