How to properly check ThemeProvider wrapped components

[barclayd]

Thanks for this excellent library. I've been using it to check my styled-components which typically use Material UI as a base and are then wrapped with a ThemeProvider so I can dynamically pass props to change specific css values when present.

An example of this:

// TextButton.js
<ThemeProvider theme={{ backgroundColour, colour }}>
      <StyledButton
        onClick={click}
        disabled={isDisabled}
        classes={{ disabled: 'disabled' }}
      >
        {text}
      </StyledButton>
    </ThemeProvider>

This passes the props to the styled-component StyledButton which looks like this:

export const StyledButton = styled(Button)`
  && {
    color: ${props => props.theme.colour};
    text-transform: capitalize;
    background-color: ${props => props.theme.backgroundColour};
    padding: 10px 20px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    &.disabled {
      background-color: grey;
      color: #000;
    }
  }
`;

To test the component, I'm using Jest for unit testing and react-test-renderer, along with jest-styled-components, to generated snapshots. I import the TextButton with the ThemeProvider wrapper as shown above into a button.spec.js like so e.g. const snapshotWrapper = renderer .create(<TextButton button={mockButton} />) .toJSON(); will generate the following button.spec.js.snap:

exports[`Button Standard renders a button correctly 1`] = `
.c0.c0 {
  color: #ffffff;
  text-transform: capitalize;
  background-color: #0e2b53;
  padding: 10px 20px;
  width: 100%;
  height: 50px;
  max-width: 97px;
  box-sizing: border-box;
}

.c0.c0.disabled {
  background-color: grey;
  color: #000;
}

@media (max-width:900px) {
  .c0.c0 {
    width: 100%;
    padding: 5px 10px;
  }
}

<button
  className="MuiButtonBase-root MuiButton-root c0 MuiButton-text"
  disabled={false}
  onBlur={[Function]}
  onClick={[Function]}
  onDragLeave={[Function]}
  onFocus={[Function]}
  onKeyDown={[Function]}
  onKeyUp={[Function]}
  onMouseDown={[Function]}
  onMouseLeave={[Function]}
  onMouseUp={[Function]}
  onTouchEnd={[Function]}
  onTouchMove={[Function]}
  onTouchStart={[Function]}
  tabIndex={0}
  type="button"
>
  <span
    className="MuiButton-label"
  >
    Search
  </span>
</button>
`;

This works perfectly and as expected. I was wondering how I can access/target the style object generated by the snapshot to verify that prop values passed to the component when testing are generated correctly as expected in the .c0.c0 class object.

I've tried using .hasStyleRule on a react-test-renderer rendered component and also a mounted enzyme version but I get the error message: No style rules found on passed Component for either approach.

Any help would be greatly appreciated, thanks!