Cannot get element inserted by v-html if the parent is the same kind of element

[dospunk]

Subject of the issue

I am trying to test a component where I have a span element with v-html such that the output looks something like this:

<span><span class="bold">12</span> years old</span>

I have confirmed that this works both in the browser and by printing out the .html() of the wrapper containing the first span. However, I cannot access the child span through any means. .findAll(span') only returns a wrapper for the parent span,

Steps to reproduce

I've created a simple example here: https://github.com/dospunk/vue-test-utils-bug

Expected behaviour

Content inserted by v-html should be accessible even if it starts with the same HTML tag as its parent

Actual behaviour

Content inserted by v-html is invisible to get(), find(), and findAll() if it starts with the same HTML tag as its parent

Possible Solution

I can work around this by selecting the parent and using .html(), but this keeps me from using most of the tools provided when testing that inserted content.

[lmiller1990]

This should work. You may need to do await wrapper.vm.$nextTick() to ensure the DOM has updated before trying to get the elements (so straight after mount). Can you try this?

[dospunk]

Just added it, no change in behavior unfortunately

[lmiller1990]

Weird... I can dig deeper at some point. I can't think of any reason this would not just work 🤔

[binvb]

Just added it, no change in behavior unfortunately

i try to use document.querySelector is fine:

test('select span in span', async () => {
  const wrapper = mount(ProblemComponent, {
    attachTo: document.body
  });
  await wrapper.vm.$nextTick();
  expect(wrapper.get('span').html()).toBe('<span> <span class="font-semibold">12</span> years old</span>'); //will pass
  expect(wrapper.get('span > span').text()).toBe('this one will be selected but not the other one'); //will pass
  expect(wrapper.get('p > span').text()).toBe('12'); //will pass
  expect(document.querySelector('span > span').textContent).toBe('12'); //will fail
  expect(document.querySelectorAll('span > span').length).toBe(2); //will fail
});