#How to test the side effect of a watcher function?

5 messages · Page 1 of 1 (latest)

rose egret
#

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>

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"`);
  });
});
#

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.. 😦

rose egret
wanton salmon
#

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)