Comments (12)
@guioconnor thanks to @ruyadorno, the package now preserves the custom class names.
The problem is now solved, but to get the most out of this package I'd suggest you to use it for testing single components (e.g. Button) rather than the entire tree.
The snapshots will be less noisy and more useful.
from jest-styled-components.
Sure! Please open a new issue as soon as you have a non-working example.
Thank you very much!
from jest-styled-components.
Hello @guioconnor, the new version of this packages strips out all the class names that don't have any style rules attached to them.
In your case, that's ok for the non-styled-components classes, but I would expect the styled-components ones to be replaced by a placeholder.
Any chances you could provide a minimal non-working example? That would help a lot.
Thanks!
from jest-styled-components.
Thanks @MicheleBertoli.
At a glance I find it counter productive to remove the classes for non styled components. The snapshot above is a good example of how difficult to read a component snapshot becomes without its classes. Dropdown, header and body become generic <div>
s and unintended changes on them may become more difficult to notice.
I'm curious to what was the rationale for removing them?
As for the styled components, I'll take an educated guess here and say that the classes were stripped as a consequence of the style code not being added to the snapshot. IE, the plugin hasn't detected there is style associated with it.
I don't have readily available code I can share but I think this may be consequence of what we are trying to do. We are building a library of common components as a separate package and the <Button>
above is the first migrated component.
I guess the styles may be being lost in in the import for snapshot purposes, though it works in the actual application.
from jest-styled-components.
Tried this with the minimal example in the readme on 4.0.3:
import 'jest-styled-components';
import styled from 'styled-components';
import renderer from 'react-test-renderer';
describe('StyledComponentTests', () => {
it('works', () => {
const Button = styled.button`
color: red;
`
const tree = renderer.create(<Button />).toJSON()
expect(tree).toMatchSnapshot()
expect(tree).toHaveStyleRule('color', 'red')
});
});
snapshot gets classname stripped
exports[`StyledComponentTests works 1`] = `
<button
className=""
/>
`;
and test fails on second assertion:
Property not found: "color"
from jest-styled-components.
@rsouthgate I can't repro the issue with v4.0.3.
When I run the code above, I get:
exports[`StyledComponentTests works 1`] = `
.c0 {
color: red;
}
<button
className="c0"
/>
`;
from jest-styled-components.
Thanks @MicheleBertoli. Awesome.
I couldn't yet solve the other issue, also mentioned by @rsouthgate, at least I'm glad to see I'm not alone. I'm going to poke the problem more and report back on it with my findings.
from jest-styled-components.
@MicheleBertoli I stripped it out of the project I was working on into a minimal dependency setup and yes, it works as you showed. The other project uses Lerna - so I'm thinking the dependency hoisting might be breaking something... I'll investigate and update here if I figure out what is causing the issue. @guioconnor Don't suppose you are using lerna where you are seeing the same issue?
from jest-styled-components.
This is interesting, thanks @rsouthgate.
If you have a way to repro the issue consistently with Lerna, I'd really love to check it out.
from jest-styled-components.
@MicheleBertoli I can't tell why it's happening but I can tell how it's happening. In the lerna structure the root package.json has a devDependency of styled-components: ^2.1.1 (and jest-styled-components: ^4.0.3). Within the package with the test that produces this error there is a package.json with a dependency of styled-components: ^2.1.1. If I remove the dependency from the package's package.json (and remove styled-components from the package's node_modules - leaving the very same version in the top level node_modules) then everything works!
I'm mystified as to why though!
from jest-styled-components.
@MicheleBertoli Just to follow up... if I explicitly bootstrap lerna with --hoist (so styled-components gets symlinked to the root version) the problem is fixed. The only implication for me is that current lerna hoisting only works with npm4 but for now that's good enough for me. I imagine this is a problem with something lerna is doing rather than anything either jest-styled-components or styled-components is doing, but thought I should follwo up here in case anyone else come across it.
from jest-styled-components.
I haven't dug into the problem yet because I'm not currently working on the package that has this issue but my project is also Lerna-based, so whatever the problem is, seems to be related to the use of Lerna.
from jest-styled-components.
Related Issues (20)
- jest-styled-components uses global.beforeEach rather than global.beforeAll or both? HOT 2
- 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`
- TypeError: document.querySelectorAll is not a function
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.