Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rendering of child components does not work with @vue/compat #298

Open
bonham opened this issue Feb 19, 2023 · 1 comment
Open

Rendering of child components does not work with @vue/compat #298

bonham opened this issue Feb 19, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@bonham
Copy link

bonham commented Feb 19, 2023

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:

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:
@bonham bonham added the bug Something isn't working label Feb 19, 2023
@julianmartire1
Copy link

same

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bonham @julianmartire1