Open
Description
Description
I have an app which is including a child component. I am testing if the app correctly renders the child component. The runtime is @vue/compat , the child component does not render. The test fails and can not find the child component title.
The app renders well with vite dev server and @vue/compat
Also the test is passing with vue3.
App.vue
<template>
<div>
<div>Outer</div>
<InnerComponent />
</div>
</template>
<script>
import InnerComponent from './components/InnerComponent.vue';
export default {
name: "App",
components: {
InnerComponent
}
}
</script>InnerComponent.vue
<template>
<div>Inner</div>
</template>testApp.spec.js
import { it } from 'vitest';
import App from '../App.vue';
import { render } from '@testing-library/vue';
it('Test rendering of child component', async () => {
const { findByText, debug } = render(App);
await findByText('Inner');
});To Reproduce
Steps to reproduce the behavior:
- checkout https://github.com/bonham/testing-library-vue-compat-bug.git
- npm install
- npm test
Note: Uncommenting the following lines in vite.config.js switches to vue3 and the test will pass:
alias: {
vue: '@vue/compat',
},
Expected behavior
Expected: Test is passing. The word 'Inner' is rendered.
Actual: The test is failing with Unable to find an element with the text: Inner following is rendered:
<body>
<div>
<div>
<div>
Outer
</div>
<innercomponent />
</div>
</div>
</body>
Related information:
@testing-library/vueversion: 6.6.1Vueversion: @vue/compat 3.2.45 ( https://v3-migration.vuejs.org/migration-build.html )nodeversion: 16.9.0npmversion: 8.19.3