In our Project, we are running jest snapshot tests with React testing library. We are using both Recharts with ResponsiveContainer and MUI with Tabs in the project, and they are both rendered in a specific test.
When no polyfill for ResizeObserver is set, the test fails with
window.ResizeObserver is not a constructor
When setting the polyfill in the test setup:
global.ResizeObserver = require('resize-observer-polyfill');
the test is failing on the MUI Tabs with this:
TypeError: Cannot read properties of null (reading 'children')
Is there a way to solve both problems with a elegant solution?
I want to test something like layout using Jest and Enzyme. But Jest uses JSDOM to simulate the real browser environment.
I can only use Jest in this old project. How can I do it?
Here are some descriptions in JSDOM: https://github.com/jsdom/jsdom#unimplemented-parts-of-the-web-platform
Summarize the problem
To begin with
To build a custom React components library, I've followed this guide (Building a React Components Library). The author uses react-styleguided along with emotion for styling, but I've found myself being more prolific with SASS, which I know already.
Setup
After some research I've set Babel and Styleguided's webpack to work with SASS. However, Jest would return failed tests because of #import rules in my *.*sass files.
This blog post here (Testing React components with Jest and Enzyme) helped me to figure out how I would do it work and, after a little work, I got all functional tests so far.
The "problem"
But I'm not finding any proper documentation on "how to write styling tests for SASS". Actually, I'm not even able to understand how I could work it out, since testing components is a new thing for me. This is my first React components library.
Is there any resource I could reach to learn about it?
I'm using TypeScript/Emotion/Rollup/Storybook to build a component library meant to be consumed by a React app. A couple preface points:
The consuming React app is working fine, and I can create Emotion-styled components within that app, and it works great and all CSS styles are applied to the app's own components.
The component library is working fine, and I can create Emotion-styled components, open Storybook, and see all the CSS styles applied in the lib's components in Storybook.
However, when I bring components over from my component library into my consuming app, their styles disappear, and upon inspection, the element looks like this:
<button data-testid="Button" css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">Submit</button>
In other words, the CSS of the component, as created in the component library, does not show up. This same element works fine in the lib's Storybook.
As an additional note, I saw the same error originally in the consuming app's OWN components, and solved it using Babel presets here as described here: https://emotion.sh/docs/css-prop
I stumbled across this question/answer, which led me to believe that the error I'm now experiencing happened because Rollup wasn't running the build through Babel: https://spectrum.chat/emotion/help/solved-css-prop-styles-not-appearing-in-built-components~cb6e75b8-7356-42d0-860b-bb01a26a3d06
After some trial and error, I got the component lib to build using Babel. But the error persists as always, and the component, when used inside the consuming app, remains unstyled with that note inside of the CSS prop.
Any ideas on how I might get the component's CSS to show up in the consuming React app?
Thanks in advance for any help!
Make sure your .tsconfig.json has compilerOptions.target: 'es6' and compilerOptions.jsx: "preserve"
and your .babelrc should have:
"presets": [
"#babel/preset-react",
"#emotion/babel-preset-css-prop"
],
I'am creating a react application by using less instead of css, I added the less loader in the file config-overrides.js in order to use it with the package customize-cra. The application looks like perfect, nevertheless when I execute yarn test which launches jest runner all less styles are undefined so I cannot test if a component has a concrete className because it's undefined too. Should I add anything in the jest configuration in package.json in order to make less availale during testing ?
Thanks!