vue-testing-library Rendering of child components does not work with @vue/compat

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/vue version: 6.6.1
Vue version: @vue/compat 3.2.45 ( https://v3-migration.vuejs.org/migration-build.html )
node version: 16.9.0
npm version: 8.19.3

Feb 19 '23 20:02 bonham

same

Jul 16 '24 20:07 julianmartire1

I found a workaround for this. If you're using pnpm, add the following to your package.json:

  "pnpm": {
    "patchedDependencies": {
      "@vue/[email protected]": "patches/@[email protected]"
    }
  },

Then create a file patches/@[email protected] with the contents:

diff --git a/dist/vue-test-utils.cjs.js b/dist/vue-test-utils.cjs.js
index 118b9b3ce4698cd6abb2c43ba5ddd70cb66ce43b..bd44b7b05023b9556f6ea8abf464740852269dca 100644
--- a/dist/vue-test-utils.cjs.js
+++ b/dist/vue-test-utils.cjs.js
@@ -7,7 +7,7 @@

 'use strict';

-var Vue = require('vue');
+var Vue = require('@vue/compat');
 var compilerDom = require('@vue/compiler-dom');
 var serverRenderer = require('@vue/server-renderer');

This forces vue test utils to use the vue compat build which is the source of the problem. If you're using npm you can use patch-package to do the same thing.

Apr 17 '25 14:04 pmdarrow