Jest & ReactTestingLibrary - Could not parse CSS stylesheet

Hey y’all,

So we have been going through and adding more tests to some of the components we are using in our app and for some reason every component/page that uses muidatatables throws an error during testing. It does not fail the test but simply spits out the error. It goes as follows:

console.error
  Error: Could not parse CSS stylesheet
      at exports.createStylesheet (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
      at HTMLStyleElementImpl._updateAStyleBlock (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
      at HTMLStyleElementImpl._childTextContentChangeSteps (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
      at HTMLStyleElementImpl._insert (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:832:14)
      at HTMLStyleElementImpl._preInsert (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)
      at HTMLStyleElementImpl._append (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:868:17)
      at HTMLStyleElementImpl.appendChild (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:610:17)
      at HTMLStyleElement.appendChild (<MY_USER_PATH>/.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/generated/Node.js:395:60)
      at StyleSheet.insert (<MY_USER_PATH>/.yarn/cache/@emotion-sheet-npm-1.1.0-40e9c90e06-a4b74e16a8.zip/node_modules/@emotion/sheet/dist/emotion-sheet.cjs.dev.js:135:11)
      at Array.finalizingPlugins (<MY_USER_PATH>/.yarn/cache/@emotion-cache-npm-11.7.1-82b45442ee-cf7aa8fe3b.zip/node_modules/@emotion/cache/dist/emotion-cache.cjs.dev.js:296:24) .tss-swqr74-MUIDataTable-@global{@media print{.datatables-noprint{display:none;}}}

  at VirtualConsole.<anonymous> (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
  at exports.createStylesheet (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:38:63)
  at HTMLStyleElementImpl._updateAStyleBlock (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
  at HTMLStyleElementImpl._childTextContentChangeSteps (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
  at HTMLStyleElementImpl._insert (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:832:14)
  at HTMLStyleElementImpl._preInsert (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)
  at HTMLStyleElementImpl._append (.yarn/__virtual__/jsdom-virtual-f91bf4c0c4/0/cache/jsdom-npm-16.7.0-216c5c4bf9-454b833718.zip/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:868:17)

we have tried a plethora of solutions to try and fix this issue and none work. Could this be due to Next 12 using the rust compiler as opposed to babel in the past? we have tried manually mocking stylesheets, manually transforming stylesheets and media files, using identity-obj-proxy, and a few other random attempts at fixing.

Here is a sample test we have tried, CacheProvider is an emotion cache provider, DarkThemeProvider provides a theme for muidatatable to use, and assume the correct props are provided to the table to render:

it('should render a table with default content', () => {
    render(
      <CacheProvider value={emotionCache}>
        <DarkThemeProvider>
          <MUIDataTable title={tableTitle} data={data} columns={columns} options={options} />
        </DarkThemeProvider>
      </CacheProvider>,
    );
    expect(screen.getByText('row 1 col 1')).toBeInTheDocument();
    expect(screen.getByText('row 1 col 2')).toBeInTheDocument();
});

Expected Behavior

Does not throw could not parse stylesheet error during testing.

Current Behavior

Throws could not parse stylesheet error during testing, despite what seems to be correct testing configuration.

Steps to Reproduce (for bugs)

1. Using next.js, jest, ts-jest, and react testing library (set up as directed https://nextjs.org/docs/testing) create a test using a muidatatable.
2. Run the testing library and observe the error.

Your Environment