{ const " /> { const " /> { const "/>

styled-components - enzyme shallow snapshots

559 Views Asked by At

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.

0

There are 0 best solutions below