vue-testing-library Reactivity issues with @vue/compat

Hi! 👋

Reactivity does not seem to work when using the vue compat build.

For example these tests will work with vue 3, but not with @vue/compat:

import {ref, onMounted, defineComponent} from 'vue';
import {it} from 'vitest';
import {render} from '@testing-library/vue';

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const TestAsync = defineComponent({
    template: '<div><div>{{ mountText }}</div><div>{{ asyncText }}</div></div>',

    setup() {
        const mountText = ref();
        const asyncText = ref();

        onMounted(() => {
            mountText.value = 'mounted';
        });

        sleep(0).then(() => {
            asyncText.value = 'async';
        });

        return {
            mountText,
            asyncText,
        };
    },
});

it('should show onMount text', async () => {
    const {findByText} = render(TestAsync);
    await findByText('mounted');
});

it('should show async text', async () => {
    const {findByText} = render(TestAsync);
    await findByText('async');
});

In compat mode it will show:

TestingLibraryElementError: Unable to find an element with the text: async. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

<body>
  <div>
    <div>
      <div />
      <div />
    </div>
  </div>
  <div>
    <div>
      <div />
      <div />
    </div>
  </div>
</body>

To Reproduce Steps to reproduce the behavior:

Use this minimal reproduction repo: https://github.com/Weetbix/vue-compat-composition-api-bug-repo

Expected behavior

The tests should pass, and the text should be found in the dom

Related information:

@testing-library/vue version: 6.6.0
Vue version: 3.2.37
@vue/compat version: 3.2.37
node version: v16.13.2
npm (or yarn) version: 1.22.19

Additional context

We have a very large code base and were hoping to migrate to Vue 3 by using compat mode. It's working at runtime but we are running into reactivity issues in the test suites.

Note: This issue also exists in the new vue 2.7` build with the backported composition API.

It does not occur in Vue 2.6 when using the @vue/composition-api plugin.

Jul 07 '22 15:07 Weetbix

I encountered the same problem in the Vue 2.7 build with the backported composition API. The old option api components test without a problem, but when using the SFC syntax the reactive content will be missing.

Related information:

@testing-library/vue version: 5.8.3
Vue version: 2.7.4
node version: v16.11.1
npm (or yarn) version: 1.22.18

This problem also occurs when using import { mount } from '@vue/test-utils' itself on that version

Jul 08 '22 10:07 lisilinhart

Hi!

This problem also occurs when using import { mount } from '@vue/test-utils' itself on that version

If I read that correctly (correct me otherwise!), does it mean that ignoring Vue Testing Library and using Vue Test Utils directly does also yield these reactivity problems? If that's the case, then this is an upstream issue in Vue Test Utils and should be reported there.

thx!

Jul 11 '22 06:07 afontcu

@afontcu Yeah, I think it might be an issue of the @vue/test-utils itself, which is used here as the main dependency. I will try to open a test case there. Just for you to be aware that it's influencing any larger codebase going from v2 -> v3 using this library

Jul 11 '22 07:07 lisilinhart

Thansk @lisilinhart and @afontcu :) I didn't think to check if it was originating from @vue/test-utils

Jul 11 '22 08:07 Weetbix

Thanks @Weetbix @afontcu: I opened this issue here: https://github.com/vuejs/vue-test-utils/issues/1983

Jul 11 '22 09:07 lisilinhart

vue-testing-library vue-testing-library copied to clipboard

Reactivity issues with @vue/compat

vue-testing-library
vue-testing-library copied to clipboard