Multi-root node components aren't cleaned properly up after each test

[romansp]

Describe the bug Components that render multiple root nodes or <slot /> in root won't be cleaned up properly after each test or by calling cleanup manually.

To Reproduce The following test cases will currently fail if added to auto-cleanup.js.

test('renders single slot component', () => {
  render({template: `<slot />`})

  expect(document.body.innerHTML).toMatchInlineSnapshot(`<div></div>`)
})

// this is about to fail because wrapping <div> from previous test won't be removed.
test('renders multiple root nodes component', () => {
  render({template: `
    <h1>Hello World</h1>
    <h2>Hello World</h2>`
  })

  expect(document.body.innerHTML).toMatchInlineSnapshot(`
    <div>
      <h1>Hello World</h1>
      <h2>Hello World</h2>
    </div>
  `)
})

// this will fail because body will still have 2 `<div>` elements attached.
test('cleans up after each test by default', () => {
  expect(document.body.innerHTML).toMatchInlineSnapshot(``)
})

Expected behavior

cleanup should remove all attached wrapping elements from body.

Related information:

• @testing-library/vue version: 6.6.1
• Vue version: 3.2.45
• node version: 18.2.1
• npm (or yarn) version: yarn 3.2.4

[XavierChevalier]

I have the same issue actually. Any news about this?

[pathai-scasarotto]

I think I am also seeing something similar. I was in the process of upgrading a number of dependencies.

[adamdehaven]

I've tried calling cleanup manually along with component.unmount (for @testing-library/vue) and the previous instance is still in the DOM when the test runs

[Serhansolo]

ah crap, we just adopted VTL here! I think I am running into the same issue.. any updates?