jest-styled-components
jest-styled-components copied to clipboard
styled-components
Snapshot doesn't include class for extended styles
Expected behavior
Given a styled component using extended styles, the snapshot should include both the base and extended classes and styles. If relevant, I'm using react-testing-library.
Current behavior
The snapshot includes the base class and styles but not the extended styles. I used screen.debug() and console.log(container.firstChild) and the extended class did show in the output of those, but the snapshot did not.
"@testing-library/jest-dom": "^5.11.2",
"@testing-library/react": "^10.4.7",
"babel-plugin-styled-components": "^1.10.7",
"jest": "^26.1.0",
"jest-styled-components": "^7.0.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1"
Component
// Button.jsx
const BaseButton = styled.button`
color: #FFFFFF;
`;
const PrimaryButton = styled(BaseButton)`
background-color: #00F;
`;
const Button = () => (
<PrimaryButton>Click Me</PrimaryButton>
);
Test
Button.spec.jsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import 'jest-styled-components';
test('should render a primary button by default', () => {
const { container } = render(<Button>Primary</Button>);
screen.debug();
console.log(container.firstChild);
expect(container.firstChild).toMatchSnapshot();
});
Snapshot
exports[`Button should render a primary button by default 1`] = `
.c0 {
color: #FFFFFF;
}
<button
class="Button__BaseButton-fba51d-0 c0"
>
Primary
</button>
`;
Output from screen.debug()
<body>
<div>
<button
class="Button__BaseButton-fba51d-0 Button__PrimaryButton-fba51d-1 fCSWoR"
>
Primary
</button>
</div>
</body>
Output from console.log(container.firstChild);
// bunch of other stuff...
pendingProps:
{ children: 'Primary',
className:
'Button__BaseButton-fba51d-0 Button__PrimaryButton-fba51d-1 fCSWoR' },
memoizedProps:
{ children: 'Primary',
className:
'Button__BaseButton-fba51d-0 Button__PrimaryButton-fba51d-1 fCSWoR' },
Is there something I'm missing, or is it an issue with jest-styled-components? Since I'm seeing the expected output when logging the same output that I'm saying expect().toMatchSnapshot(), it makes me think the issue is here.
...However, I'm also seeing No style rules found on passed Component if I try to use .toHaveStyleRule() on the same element that does output style rules in the snapshot, which makes me think that either I'm not setting it up right.
Follow-up--what I'm actually trying to test is that the correct button type is rendered given props.variant:
const Button = ({ variant }) => {
const ButtonWrapper = variant === 'primary' ? PrimaryButton : SecondaryButton;
return (
<ButtonWrapper>Click</ButtonWrapper>
};
So I want to test that <Button variant="primary" /> uses PrimaryButton. I couldn't think of a way to test this using react-testing-library other than a snapshot, but I'm very open to suggestions if there's a better approach to test this behavior!
New update :)
Found that this solution from this issue fixed toHaveStyleRule (set ["babel-plugin-styled-components", { ssr: false, displayName: false }] in babelrc) and it's able to find a style rule applied from the extended styles, but the snapshot still doesn't show the extended styles. That brings me back to thinking that it's an issue here with snapshots.
