Mantine 6 UI createSytles colors are undefined in tests if used with pnpm

190 views Asked by At

So the problem is as follows: We had a fully functioning React Project with Jest for testing and Mantine for Components. Than we made the decision to change from npm to pnpm, because of performance benefits. Everything works fine but Jest. It breaks in more ways than one with pnpm. I managed to fix most of the problems (mostly by downgrading Jest version to 27). My latest trouble is the createStyles from Mantine. The theme object is the default and not the custom that I provide therefore the test fails every time because I'm trying to access color that do not exist in the Default one. I made sure the MantineProvider is wrapped around the tested component [fig 1]

const Providers: FC<PropsWithChildren<any>> = ({children}) => {
  return(<BrowserRouter><MantineProvider theme={theme}>{children}</BrowserRouter></MantineProvider>
}

const wrapper = (): React.FC<PropsWithChildren<{}>> = > {
  return ({children})=> {
    return <Providers>{children}</Providers>
  };
}


const customRender(ui: ReactElement, opt: Omit<RenderOptions, wrapper>) => {
  const wrapper = wrapper();

  return render(ui, {
    ..opt, wrapper
  })
}

the test simply creates a snapshot and the components fails at the following line:

const styles = createStyles((theme)=>{
  customStyle: { 
    padding: '24px',
    color: theme.colors.white[2], //fail because white is undefined
  }
})

with the following message:

cannot read property of undefined (reading '2') [then it points to said line]

Colors defined in theme:

...
colors: {
  green: ['#', '#', '#'],
  white: ['#', '#', '#'],
  ...
}
...
//replaced colors with # to be concise

Additional Information:

  • It started after pnpm update, it was not
  • We are using react-app-rewired as our DevTool
  • As mentioned above, everything Works: Build, Develop, Start, Deploy. Except for Unit tests with Jest. (Cypress has no Issues either)
  • following script is used to start the test:
"test": "react-app-rewired test --env=jsdom"
  • Jest version 27.5.1
  • Mantine Version 6.0.21
  • No we cannot just not Test, QA will hang us if we try to push untested code into prod.

My Assumptions:

  • something is fishy with react-app-rewired, we are looking into Vite, but it might take some time, and the project must work now.
  • possibility of update to Mantine 7 is on the Table, but again, this will require a whole bunch of stuff to be reworked, so it will happen, but not today.
  1. Have somebody encountered something like that, or at least does somebody have an Idea to why it might be happening?

and

  1. Why would the migration from npm to pnpm completely break Jest?

If you could answer any of those questions, your help will be greatly appreciated.

0

There are 0 answers