jsdom Issue with nesting Direct Child Selector

Basic info:

Node.js version: v14.19.1
jsdom version: 19.0.0

Minimal reproduction case

const { JSDOM } = require('jsdom');

const HTML = `<!DOCTYPE html><html><body><main id="main-content"><div><div><div><h1>Hello, World!</h1><p>Paragraph</p></div></div></div></main></body></html>`;

test('tripple direct child selector', () => {
  const {
    window: { document }
  } = new JSDOM(HTML);

  const header = document.querySelector('#main-content > div > div > div h1');
  expect(header).toBeTruthy();
  expect(header.textContent).toBe('Hello, World!');
});

test('double direct child selector', () => {
  const {
    window: { document }
  } = new JSDOM(HTML);

  const header = document.querySelector('#main-content > div > div h1');
  expect(header).toBeTruthy();
  expect(header.textContent).toBe('Hello, World!');
});

test('double direct child with nth-child selector', () => {
  const {
    window: { document }
  } = new JSDOM(HTML);

  const header = document.querySelector('#main-content > div > div:nth-child(1) h1');
  expect(header).toBeTruthy();
  expect(header.textContent).toBe('Hello, World!');
});

test('descendant selector', () => {
  const {
    window: { document }
  } = new JSDOM(HTML);

  const header = document.querySelector('#main-content div div h1');
  expect(header).toBeTruthy();
  expect(header.textContent).toBe('Hello, World!');
});

test('descendant with nth-child selector', () => {
  const {
    window: { document }
  } = new JSDOM(HTML);

  const header = document.querySelector('#main-content div div:nth-child(1) h1');
  expect(header).toBeTruthy();
  expect(header.textContent).toBe('Hello, World!');
});

How does similar code behave in browsers?

All three tests should find the h1 element, but only the first one does. See comparison in jsbin

I’m also attaching a minimal demo in Node. minimal-demo.zip

Apr 29 '22 08:04 alopix

Still an issue in 20.0.0.

Jun 20 '22 09:06 alopix

When I tried to run this minimal demo using node index.test.js, I got this error:

test('tripple direct child selector', () => {
^

ReferenceError: test is not defined
    at Object.<anonymous> (C:\Users\Domenic\Dropbox\GitHub\jsdom\jsdom\test.js:5:1)
    at Module._compile (node:internal/modules/cjs/loader:1246:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47

If you can produce a demo that runs in Node by itself, I'll reopen.

May 01 '23 06:05 domenic