Comments (6)
Promote the component to its own module and do snapshot testing on it there.
This is definitely the way to go! You could also just partially export it if you don't want to add another file:
export const Title = // ...
export default class FullComponent extends React.Component { /* ... */ }
Then you can import both in your tests and test the separately:
import FullComponent, { Title } from '../FullComponent';
describe('<FullComponent />', () => { /* ...shallow render <FullComponent />... */ })
describe('<Title />', () => { /* ...shallow render <Titlte /> ... */ })
from jest-styled-components.
Hello Tyler, thanks for opening the issue.
I understand why this might be confusing but that's how shallow rendering works.
Shallow rendering renders the components only one level deep, and that's the reason why the Title
is shown as styled.h1
and it doesn't have any class names.
I don't believe this is an issue or something to solve, but I'll be happy to discuss further in case you do. I'm going to close this but anyone should feel free to reopen it in case we want to address the problem.
from jest-styled-components.
That does make sense. I think it was a mistake in how I was viewing the Title
component. I was seeing it as: <Title className="2rQth">Hello World</Title>
, when it's actually more like: Title =(props) => <h1 className="2rQth">{props.children}</h1>
. The className
is not passed as a prop toTitle
.
In that case, when it comes to testing examples like this (where we have two components that we would like to test, but we don't want to do a deep render because the contents have a lot of stuff in the tree that we are testing elsewhere), is there a decent way of snapshotting the styles? The options I can think of are:
- Promote the component to its own module and do snapshot testing on it there.
- Deep render with manual mocks on the components that you don't want to render.
Thanks for your help on this!
from jest-styled-components.
Perfect. Thanks for the advice @mxstbr. I'll get to it!
from jest-styled-components.
I fell into the same issue and finally I realized to use your second option of deep rendering with mocking (ignoring) the nested components defining empty functions.
jest.mock('../Inner', () => 'inner')
const snapshot = mount(<Wrapper />)
I documented it here, so I hope it will be helpful for some others... https://medium.com/@melounek/jest-snapshots-with-nested-components-c08ceef34108
from jest-styled-components.
Thank you very much, @melounek.
from jest-styled-components.
Related Issues (20)
- getHTML() is failing, not sure why. HOT 1
- toHaveStyleRule is not compatible with some displayNames if fileName is used
- Child component className value regression from 7.0.7 to 7.0.8 HOT 2
- `setStyleSheetSerializerOptions` types not working HOT 1
- Create wrapper matcher around .toHaveStyleRule
- Doesn't seem to support Jest 28.x.x HOT 6
- [Bug] wrong className generated
- tabs vs spaces
- [Bug] Chained selectors with pseudo-state filters are parsed incorrectly in v7.1.1 HOT 1
- More diffs showing on unchanged snapshot lines
- Dft
- Not working correctly with @testing-library/react HOT 3
- Library is not applied to tests where the Renderer object was created in a 'describe'
- Doesn't seem to support Jest 28 and newest HOT 8
- toHaveStyleRule with @media rule breaks after styled-components update HOT 6
- TypeError: global.beforeEach is not a function HOT 6
- update adobe/css-tools to v4.3.2 due CVE-2023-48631
- Compatibility Issue with `jest-styled-components` and Storybook's `test-runner` HOT 1
- TypeError: document.querySelectorAll is not a function
- @starting-style - Error: :1:1329: missing '}'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jest-styled-components.