Nuxt•3mo ago

How to test the side effect of a watcher function?

I have a component that looks something like this:

<script setup>
const foo = ref('foo');
function e() {
  $fetch('/xyz').then((data) => {
    foo.value.textContent = data;
  });
}
watch(foo, (node) => {
  node.textContent = 'oui';
  e();
});
</script>

<template>
  <div ref="foo" />
</template>

<script setup>
const foo = ref('foo');
function e() {
  $fetch('/xyz').then((data) => {
    foo.value.textContent = data;
  });
}
watch(foo, (node) => {
  node.textContent = 'oui';
  e();
});
</script>

<template>
  <div ref="foo" />
</template>

In my test, I'd like to assert that the change that happens in the e() function is done. So far, I see the change that happens in the watch happen, and the side effect from running e(). However when I try to assert the textContent has changed due to the call, ~~I am stuck.~~ edit: used flushPromises to pass assertion

import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime';
import { flushPromises } from '@vue/test-utils';
import Comp from './Comp.vue';

registerEndpoint('/xyz', () => 'aasd');

describe('Comp', () => {
  it('works with watchers', async () => {
    await flushPromises();
    const c = await mountSuspended(Comp);

// this now passes    
expect(c.text()).toMatchInlineSnapshot(`"aasd"`);
  });
});

import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime';
import { flushPromises } from '@vue/test-utils';
import Comp from './Comp.vue';

registerEndpoint('/xyz', () => 'aasd');

describe('Comp', () => {
  it('works with watchers', async () => {
    await flushPromises();
    const c = await mountSuspended(Comp);

// this now passes    
expect(c.text()).toMatchInlineSnapshot(`"aasd"`);
  });
});

3 Replies

dmarrOP•3mo ago

Ah, I guess flushPromises() does work here. This was an attempt for a minimal reproduction but I still have work to do in my actual file since flushPromises doesn't seem to be enough seems to be because of that weirdness with registerEndpoints not working when there are multiple endpoints being mocked, and they aren't mocked in the exact order they are called.. 😦

dmarrOP•3mo ago

Maybe this boils down to a pinia issue. I have this test that is failing: https://stackblitz.com/edit/nuxt-starter-k48kf2?file=tests%2Fapi.test.ts Basically the fetch call in the store isn't awaited with flushPromises

David Marr

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

dwol•3mo ago

This is the only way I got my assertions to work when testing a watcher

await new Promise<void>((resolve) => {
        setTimeout(() => {
          expect(...assertions here)
          resolve()
        }, 1000)

await new Promise<void>((resolve) => {
        setTimeout(() => {
          expect(...assertions here)
          resolve()
        }, 1000)

you can change the timeout to whatever would be more appropriate for you, in this case it's a debounced watcher

Gaming

Programming

How to test the side effect of a watcher function?