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?
Related
I'm using TailwindCSS to implement a React App, and Jest to test it. I expect changing the window size can cause some elements to appear and disappear. Then I realized jsDom doesn't load TailwindCSS, and I followed React testing library can't read styles using Tailwind CSS classes and successfully injected the compiled CSS into document.head of jsDom. However, after I changed the window size by using
window.innerWidth = 480;
window.dispatchEvent(new Event("resize"));
expect(window.innerWidth).toBe(480); // This passes
expect(screen.getByTestId("nav-bar-bottom")).not.toBeVisible(); // fails
the element that should be gone still exists.
I hear someone mentioned jsDom doesn't support responsive test. So how responsive tests should be conducted then?
I'm looking to test that a component has an opacity value of 0 after firing an event, I have not found how to get/check for a specific css property with enzyme (enzyme docs), is it even possible to do it just with enzyme & ava? Or is a third party library needed? At most I get the component props or the class name but I have no access to the style.
OBS: I don't want to use Jest instead of Ava, any other supporting library to work alongside with ava is welcome.
For the record, the answers in this question:
How to test style for a React component attribute with Enzyme
Don't seem to work unless you use Jest.
Versions:
ava: 3.8.2
enzyme: 3.11.0
OS: Catalina (macOs)
node: v12.22.X
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
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!
/Users/***/Desktop/projects/***/node_modules/jest-runtime/build/index.js:517
const wrapper = this._environment.runScript(transformedFile.script)[
Sometimes if i'm run npm test jest given this error.
It can be caused by running an Animated animation in React Native. Not running that animation when jest is detected is the best solution I found for now. I tried not to run animation, and the error gone.
This happens to me when not shallow rendering a component in a test.
My guess is that it's caused by the rendering of the children components, so I mocked the parent component of the render function and the tests started running fine.
You have a great example of mocking children components here: https://jestjs.io/docs/en/es6-class-mocks