New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Snapshot is missing css/styles when using shallow from enzyme #145
Comments
Hello @chhuang , can you please provide more information about your When I run the following code: const Button = styled.button`
color: red;
`
test('it works', () => {
const wrapper = shallow(<Button />)
expect(wrapper).toMatchSnapshot()
}) My snapshot looks like this (as expected):
Thank you very much! |
I'm experiencing this issue as well and managed to reproduce it on code sandbox. I added 2 test cases 1 for Edit: Code//Hello.js
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
color: red;
padding: 10px;
`;
class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello {this.props.name}!</h1>
<Button>Test</Button>
</div>
);
}
}
export default Hello;
//Hello.test.js
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import renderer from "react-test-renderer";
import { configure } from "enzyme";
import { shallow } from "enzyme";
import toJson from "enzyme-to-json";
import Hello from "./Hello";
import "jest-styled-components";
configure({ adapter: new Adapter() });
describe("<Hello /> enzyme snapshot", () => {
it("serializes the styles", () => {
const output = shallow(<Hello name="Test" />);
expect(toJson(output)).toMatchSnapshot();
});
});
describe("<Hello /> test renderer snapshot", () => {
it("serializes the styles", () => {
const output = renderer.create(<Hello name="Test" />);
expect(output).toMatchSnapshot();
});
}); Snapshots// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Hello /> enzyme snapshot serializes the styles 1`] = `
<div>
<h1>
Hello
Test
!
</h1>
<Button>
Test
</Button>
</div>
`;
exports[`<Hello /> test renderer snapshot serializes the styles 1`] = `
.c0 {
color: red;
padding: 10px;
}
<div>
<h1>
Hello
Test
!
</h1>
<button
className="c0"
>
Test
</button>
</div>
`; |
Thank you very much @carloscheddar for providing detailed repro code. The reasons why there's no style in the first snapshot are:
That's the expected behaviour. If you try using |
Hi @MicheleBertoli //react-test-renderer
.c0 {
color: red;
}
<button
className="c0"
/>
//****** VS ******//
//enzyme && enzyme-to-json
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": false,
"rules": Array [
"
color: red;
",
],
},
"displayName": "styled.button",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": "button",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
/> Can you check it? Regards |
Thanks for your comment, @rjohnep. |
Hi @MicheleBertoli is there any update when this could be fixed? This is how my snapshot looks like when using Shallow, I am not sure if I could be doing something wrong.
Could we re-open it? the issue don't seems to be solved. Thanks. |
When I do:
I only get:
It's fine if I use renderer from
react-test-renderer
:The text was updated successfully, but these errors were encountered: