Usage of css.escape polyfill breaks any code that asserts against the truthiness of `window.CSS`

[rdwoodring]

• @testing-library/jest-dom version: 5.16.4
• node version: 16.15.0
• npm (or yarn) version: 8.5.5

Relevant code or config:

This test works fine:

test('window.CSS is not present', () => {
  expect(() => {
    if (window.CSS && !window.CSS.supports) {
      throw new Error('window.CSS is present')
    }
  }).not.toThrow()
});

This test will explode because window.CSS is present, but only window.CSS.escape is polyfilled:

import '@testing-library/jest-dom';

test('window.CSS is not present', () => {
  expect(() => {
    if (window.CSS && !window.CSS.supports) {
      throw new Error('window.CSS is present')
    }
  }).not.toThrow()
});

What you did:

Trying to run my entire test suite after enabling @testing-library/jest-dom globally in my setup tests file

What happened:

Receive an error that window.CSS.supports is undefined. The actual module that's exploding is is react-responsive-pinch-zoom-pan where a conditional is used to check the truthiness of window.CSS and then call window.CSS.supports. To be fair, that module should really also be checking the truthiness of window.CSS && window.CSS.supports before calling it, but it doesn't seem that unreasonable .

Reproduction:

• see code sample above
• also see https://github.com/rdwoodring/testing-library-jest-dom-defect

Problem description:

the usage and import of the css.escape module creates the window.CSS namespace to exist in JSDOM and only polyfills the escape function. The window.CSS namespace is usually falsy in JSDOM. Any code checking window.CSS for truthiness and then calling one or more of the member functions (other that escape) will now fail, ex. window.CSS && window.CSS.supports('color', 'green')