27.0.0 broke multi-level query selecting in vitest/testing-library

[KieranP]

Node.js version

22.15.1

jsdom version

27.0.0

What is the problem?

As per the issue template, I expect this will be closed, and I wouldn't want to waste your time, but I thought you might want to at least know that upgrading from 26.1.0 to 27.0.0 introduced a major undocumented change/regression that broke tests that rely on nested query selection. It seems that document.querySelector now always operates from root now, so nested calls ignore all previous ones.

Minimal reproduction case

vitest-jsdom-issue.zip

import { JSDOM } from "jsdom";

const dom = new JSDOM(`
  <div>
    <span>Actions</span>
    <ul>
      <li>
        <a href="/">
          <span>Link</span>
        </a>
      </li>
    </ul>
  </div>
`);

const document = dom.window.document;

const anchor = document.querySelector("a");
// console.log(anchor); // Uncomment this and it works?!

const span = anchor.querySelector("span");

console.log(span.innerHTML);

Outputs "Actions" instead of "Link"

How does similar code behave in browsers?

It scopes queries based on previous selectors

[asamuzaK]

Test passing on our side.
#3929

[KieranP]

@asamuzaK Hmm, that is odd.

I'm using Vitest & @testing-library/svelte:

simple.svelte

<div>
  <span>Actions</span>
  <ul>
    <li>
      <a href="/">
        <span>Link</span>
      </a>
    </li>
  </ul>
</div>

simple.test.ts

import { cleanup, render } from '@testing-library/svelte'

import Simple from './simple.svelte'

describe('Simple', () => {
  afterEach(cleanup)

  it('works', () => {
    render(Simple)

    const anchor = document.querySelector('a')
    console.log(anchor.innerHTML)

    const span = anchor?.querySelector('span')
    console.log(span.innerHTML)

    expect(span.innerHTML).toBe('Link')
  })
})

JsDom v26.1.0:

<span>Link</span>
Link

Test Files  1 passed (1)

JsDom v27.0.0:

<span>Link</span>
Actions

Test Files  1 failed (1)

The only thing that changes between the working result and the broken one is the JsDom version, no other dependencies or code altered.

[KieranP]

What the heck.... If I console.log(anchor), then the test passes:

import { cleanup, render } from '@testing-library/svelte'

import Simple from './simple.svelte'

describe('Simple', () => {
  afterEach(cleanup)

  it('works', () => {
    render(Simple)

    const anchor = document.querySelector('a')
    console.log(anchor) // <- comment this out and it fails

    const span = anchor.querySelector('span')
    expect(span.innerHTML).toBe('Link')
  })
})

Why would adding a console.log(anchor) change which elements the subsequent querySelector finds? :-/

Feels like a caching/memoize issue?

[asamuzaK]

Perhaps vitest or @testing-library/svelte issue then?

[KieranP]

@asamuzaK @domenic Can we please reopen this? I have managed to get a minimal reproduction with just JSDOM (no Vite/Vitest/Svelte needed). I have updated the issue description with it, and posting here also:

vitest-jsdom-issue.zip

import { JSDOM } from "jsdom";

const dom = new JSDOM(`
  <div>
    <span>Actions</span>
    <ul>
      <li>
        <a href="/">
          <span>Link</span>
        </a>
      </li>
    </ul>
  </div>
`);

const document = dom.window.document;

const anchor = document.querySelector("a");
// console.log(anchor); // Uncomment this and it works?!

const span = anchor.querySelector("span");

console.log(span.innerHTML);

The console.log should output "Link" but it outputs "Actions".

If you downgrade to <27.0.0 OR uncomment the console.log in the middle, then it outputs "Link" as expected.