gregnb / gregnb/mui-datatables
Jest & ReactTestingLibrary - Could not parse CSS stylesheet
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
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 (/.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 (/.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)
at HTMLStyleElementImpl.appendChild (/.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 (/.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 (/.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 (/.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. (.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(
,
);
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
| Tech | Version |
|--------------|---------|
| Material-UI | 5.4.3 |
| MUI-datatables | 4.1.2 |
| React | 17.0.2 |
| Next | 12.1,0 |
| Jest | 27.5.1 |
| ts-jest | 27.1.3 |
| @testing-library/react | 12.1.3 |
| @testing-library/jest-dom | 5.16.2 |
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.