Description
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/vueversion: 6.6.0Vueversion: 3.2.37@vue/compatversion: 3.2.37nodeversion: v16.13.2npm(oryarn) 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.