I am trying to find the solution how to avoid whole theme object in Jest snapshot.
I got, for Example, this simple test.
test("render", () => {
const wrapper = shallow(<Result item={item} />);
expect(wrapper).toMatchSnapshot();
});
Result.js
const Title = styled.h3`
background-color: ${({ theme }) => theme.colors['primary']};
`
Title.defaultProps = {
theme: defautlTheme,
};
export default ({ item }) => (
<div>
<Title>{item.title}</Title>
<p>{item.info}</p>
</div>
);
the Snapshot looks like:
exports[`render 1`] = `
<div>
<Result__Title
theme={
Object {
"colors": Object {
"accent-100": "#000000",
"accent-200": "#000000",
"accent-300": "#000000",
"accent-400": "#000000",
"accent-500": "#f1c933",
"accent-600": "#000000",
"accent-700": "#ebbd10",
"accent-800": "#000000",
"accent-900": "#000000",
"black": "#000",
....
Is possible to somehow to avoid this theme in snapshots with shallow.
Because it is very annoying if I change some color in theme, tests will fail in many other places.