Jest & ReactTestingLibrary - Could not parse CSS stylesheet #1886
Comments
|
Also getting this issue suddenly. |
|
Getting the same error, but without using Next.js. I am using Looking at the stack trace, the error originates The issue happens to me when trying to update from v4.0.0 to 4.1.0. To me it looks like the biggest change was switching to Don't really know how this should be dealt with, but maybe this would help with investigating 🙂 |
|
To follow up with a bit more investigation: I decided to try and see how the CSS that Notice how the last vs.
Not sure why the stylesheet contains only one rule, but I assume it doesn't really matter. What I assume matters here is that a class name is created with |
|
Any ideas for a work around? I tried downgrading to EDIT: Poked around a little more and it seems like an out of date |
|
Hi @aaneitchik, I am the maintainer of |
|
Hi @garronej , thank you for reaching out! I don't know if |
|
I am having the same issue and I am not using Next.js I have done this as temp work around. |
|
I encountered this issue as well on jest.mock('tss-react/mui', () => {
const real: typeof import('tss-react/mui') = jest.requireActual('tss-react/mui')
return {
...real,
withStyles: (...args: unknown[]) => {
/** Making sure we are not targeting the wrong rule */
if (
args.length !== 3 ||
typeof args[1] !== 'function' ||
args[1].name !== 'defaultTableStyles' ||
!args[2] ||
typeof args[2] !== 'object' ||
!('name' in args[2]) ||
(args[2] as Record<string, unknown>).name !== 'MUIDataTable'
) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return real.withStyles(...args)
}
const [component, styleGenerator, config] = args
return real.withStyles(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
component,
(...args: unknown[]) => {
const styles: unknown = styleGenerator(...args)
/** Making sure we are deleting the right styles */
if (styles && typeof styles === 'object' && '@global' in styles) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete styles['@global']
}
return styles
},
config
)
}
}
})Put it before your tests that involve this library and the bad styles complaints should go away. |
|
Hi @aaneitchik, Sorry your answer went under my radar for some reason.
You are correct, thank for clearing this out for me, I add to my backlog to support @filipomar thanks for sharing a workaround. Best, |
|
Still experiencing this in "mui-datatables": "^4.2.2" any idea if this will get resolved? |
|
@Npervic, I've open an issue about it. Best |
|
@wdh2100 anyway we could get these PRs merged in? looks like they are GTG. |
|
@wdh2100 Any way we can get the above mentioned pr merged? |
|
Im still seeing this issue with "@global" styles. Any new finds recently? |
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:
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:
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)
Your Environment
The text was updated successfully, but these errors were encountered: