Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reactivity issues with @vue/compat

See original GitHub issue

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.

Issue Analytics

State:
Created a year ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

lisilinhartcommented, Jul 8, 2022

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: