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(``)
})