nth-child inside nth-child selector returning null

[anselmbradford]

🐛 Bug Report

It appears an nth-child selector inside another nth-child selector returns null.

To Reproduce

Steps to reproduce the behavior:

1. Visit this codepen and see that the HTML can be queried with the selector '#test-one tbody tr:nth-child(1) td:nth-child(3)' and logs:

<td>
    2.6 mi
</td>

2. Create this jest unit test with the same HTML and selector and see that it logs dom node: null when run:

const HTML_SNIPPET = `
<table id="test-one">
    <thead>
        <tr>
            <th>
                Agency
            </th>
            <th>
              <button>
                Languages
              </button>
            </th>
            <th>
              <button>
                Distance
              </button>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Alpha
            </td>
            <td>
                English
            </td>
            <td>
                2.6 mi
            </td>
        </tr>
        <tr>
            <td>
                Beta
            </td>
            <td>
                English, Spanish
            </td>
            <td>
                1.4 mi
            </td>
        </tr>
        <tr>
            <td>
                Gamma
            </td>
            <td>
                English, French, Spanish
            </td>
            <td>
                1.4 mi
            </td>
        </tr>
        <tr>
            <td>
                Delta
            </td>
            <td>
                English, Spanish
            </td>
            <td>
                3.2 mi
            </td>
        </tr>
        <tr>
            <td>
                Epsilon
            </td>
            <td>
                English
            </td>
            <td>
                1.6 mi
            </td>
        </tr>
        <tr>
            <td>
              Zeta
            </td>
            <td>
              English, Spanish
            </td>
            <td>
              1.2 mi
            </td>
        </tr>
        <tr>
            <td>
                Eta
            </td>
            <td>
                English
            </td>
            <td>
                11.1 mi
            </td>
        </tr>
    </tbody>
</table>
`;

describe( 'Table', () => {

  beforeEach( () => {
    document.body.innerHTML = HTML_SNIPPET;
  } );

  it( 'should have the .sort-up class sort table on load', () => {
    const selector = '#test-one tbody tr:nth-child(1) td:nth-child(3)';
    const dom = document.querySelector( selector );

    console.log( 'dom node:', dom );
  } );

} );

3. Change query to '#test-one tbody tr:nth-child(1) td' and see that dom node: HTMLTableCellElement {} is logged, appearing to indicate issue is with the inner nth-child query in the selector.

Expected behavior

Jest and codepen example should behave the same way in regard to selectors.

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  Binaries:
    Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
  npmPackages:
    jest: ^23.4.1 => 23.4.1

[anselmbradford]

Appears this may be fixed in these unreleased jsdom changes jsdom/jsdom#2262

[thymikee]

Jest ships with older JSDOM to support Node 6. See #7538 (comment) on how to make Jest work other version of JSDOM.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.