Jest snapshot problem with component Fade #17992
Comments
oliviertassinari
added
test
docs
|
Related to #17119. An update of our documentation is welcome. |
|
@oliviertassinari I followed your comment, but still get the same error: import React from "react";
import renderer from "react-test-renderer";
import { Fade } from "@material-ui/core";
test("Fade should render correctly", () => {
const tree = renderer
.create(
<Fade in={true}>
<div>some text</div>
</Fade>,
{
createNodeMock: node => document.createElement(node.type as any);
}
)
.toJSON();
expect(tree).toMatchSnapshot();
}); |
|
@alexiwonder Oh right, sorry, we track this problem in: I don't remember what's wrong exactly with react-transition-group. Probably the same thing that holds us back with #13394: the usage of the deprecated findDOMNode() method. |
oliviertassinari
added
bug 🐛
|
If anyone is still facing this issue, try checking out the documentation and using one of the test utils there. This helped me for my case, I created a render HOC to use for each test that had a MaterialUI component. What my test looked like: And this got it to pass. |
|
Can this be done without enzyme? I am using Jest. |
|
I found a solution to mock the Fade component in Material UI. jest.mock('@material-ui/core', () => {
const materialUI = jest.requireActual('@material-ui/core');
return {
...materialUI,
Fade: jest.fn(({ children }) => children),
}
});
describe('Component', () => {
const { ThemeProvider } = jest.requireMock('@material-ui/core');
it('renders correctly', () => {
const tree = renderer.create(
<ThemeProvider theme={theme}>
<Component />
</ThemeProvider>,
).toJSON();
expect(tree).toMatchSnapshot();
});
}); |
|
Correct solution: #17119 (comment) |
|
@oliviertassinari I'm still getting this error when implementing solution from #17119 (comment) I'm unit testing a component with My component is using a few material-ui components: import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Divider from '@material-ui/core/Divider';Partial test code: const tree = renderer.create(<Navbar />, {
createNodeMock: (node: ReactHTMLElement<HTMLElement>): HTMLElement =>
document.createElement(node.type)
});
...
...
const as = tree.root.findAllByType('a');
// Error is thrown here
act(() => {
as[0].props.onClick(e); // Should open Mui Drawer
});Error: I've tried mocking Fade as well, but that is throwing another stack of errors. Although it was working for a while until a recent Mui version upgrade I believe. jest.mock('@material-ui/core/Fade'); |
|
it worked well for me: jest.mock('@material-ui/core/Fade'); My dependencies: |
Current Behavior 😯
When
Fadecomponent hasin={true}, Jest fails to render it with messageTypeError: Cannot set property 'webkitTransition' of undefinedStack trace:
Expected Behavior 🤔
Test should be able to render a composite component containing
<Fade in={true}/>.Steps to Reproduce 🕹
Steps:
Context 🔦
Snapshot testing with
Jestas explained here: https://jestjs.io/docs/en/snapshot-testingYour Environment 🌎
The text was updated successfully, but these errors were encountered: