New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styles not found on a component (toHaveStyleRule) #170
Comments
Hello @msbober, thanks for opening this issue. |
Fwiw, I'm experiencing the same issue, but cannot provide much debugging information at this time.
|
Same here, snapshot's okay, but no styles found using
|
I'm running into the issue as well and have been trying to setup a codesandbox with a repro. Can't get the sandbox running with jest + enzyme though. Do you have a codesandbox that I could use as a starter somewhere? |
Hey @Thomas88, thanks for your comment. Codesandbox helps but it's not require, if you could paste the code (of the component and the failing test) here, I will be happy to run it locally. |
At some point the problem just stopped happening for us ( Currently we think that in our case it was some weird yarn caching problem. We'll keep an eye for it. I'd close the issue but it looks like there are others observing the same behaviour. |
I think I found the pattern that breaks after updating to version 6. It occurs when the styled component is (shallow) rendered by another component (which is the one being tested). Here's an example:
|
I am experiencing this issue with the same scenario that @Thomas88 is describing. |
This is awesome, thanks @Thomas88 @wesrice. @Thomas88 you should run the expectation on describe('<MyComponent />', () => {
it('renders with style rule', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toHaveStyleRule('opacity', '1');
});
}); |
How awesome is that. Thanks for the fast fix @MicheleBertoli! All tests are working again. |
I wasn't sure if I should open another issue or comment here. I'm experiencing the same issue as described previously -
|
Hello @jsjoeio, thanks for your comment. Would you be able to provide a non-working repo or sandbox? |
@MicheleBertoli Strange... Here's a non-working repo: https://github.com/jsjoeio/styles-not-found/tree/master |
Thanks for setting up a repo, @jsjoeio. |
Ahhh - that makes sense now. My apologies @MicheleBertoli - I should have checked if |
In case anyone comes here because they have the same issue, I hit this from having two versions of styled-components in my node_modules (Lerna multimodule with a yarn workspace - there was a hoisted version and a version local to one module). |
Thank you @lexanth! I was having the same issue. |
Having this issue as well, this is my component:
And here is the test:
Which gives me: package.json:
|
Thanks for your comment, @jmacioszek. The test says "No style rules found on passed Component" because you are shallow rendering and the children components don't get resolved. If you use mount, the tests will work. I hope this helps. |
For anyone else running into this, my issue was styled-components not being hoisted in my monorepo. I had dev and peer dependencies misconfigured in a couple packages, so there were two versions being referenced depending what package I was importing from. Check your You should only see one copy of styled components hoisted to the root node_modules of of your monorepo. |
I changed rendering method shallow to mount and it worked. Thanks. |
I'm running into the same issue. Not exactly sure what I'm doing wrong here, but here are my files: import React from 'react';
import styled from 'styled-components';
const Home = styled.div`
.desktop {
color: red;
display: block;
}
`;
const HomeView = function() {
return (
<Home className="home">
<div className="desktop">The desktop home page!</div>
</Home>
);
};
export default HomeView; Spec File: import React from 'react';
import { mount } from 'enzyme';
import { HomeView } from './';
import 'jest-styled-components';
describe('Examples', () => {
it('should check the styles', () => {
const wrapper = mount(<HomeView />);
const element = wrapper.find('.desktop');
expect(element).toHaveStyleRule('color', 'red');
});
}); In the end I'm getting the error
|
There's no styling for Home component. Error is normal. I think, if you have another styled component, just write like this and write a test for that component:
|
@Soul244 how does one access the styles for nested elements though? |
@goodbomb i updated my answer. |
Damn, so you can't use the cascading styles aspect of Styled-Components? That's one of the big benefits I see for using it. You only need to style the top-level component, and then use normal cascading CSS selectors for the child elements. Having to create new components for every styled element adds a lot of verbosity to the styles and the file itself. |
If you need a general component which created with styled component, just write that in a file and export it. I am not sure, what you need exactly? A hover example:
I am sure, Styled Components is ten times more better than css. You can use all css selectors and other things in Styled Components. Docs: https://www.styled-components.com/docs this is my mail address: hasancangedik@hotmail.com. I can help you, if you have a problem about styled-components. |
We're using the Cascade approach to styling. So instead of creating a new component for each element we want to style (like you're doing in your examples), we're using cascade selectors (like you do in normal CSS files). Instead of this:
We're doing this:
Our approach makes for less verbosity and is much closer to normal CSS. I take it this library doesn't support that approach, @Soul244 ? |
No, you can use your approach. I tried and couldn't find a problem. Could you write result of this code?
Probably, toHaveStyleRule function is just working for styled components. You need to test it with another function. Maybe this: "toHaveProperty". |
I did this:
Output only gives me this: Changing to
|
I can't help you about this problem, sorry. But i found what is your problem with your approach. Styled Components creates a unique class name for every component to prevent css problems with other html elements. But when you create a component like you do, it's creating a normal css class name. For example:
in this code, Home has a unique class name. You can see the name on inspect. But child component class name is not unique. That is the problem. So you need to create new styled component for every element. |
With the latest
enzyme
(3.4.1) andjest-styled-components
(6.0.0), thetoHaveStyleRule
assertion is not finding the styles on a component.Symptoms:
Also visible in snapshots. Before, the snapshot included the style classes definition, e.g.:
With the latest enzyme, in the snapshot, the
className
is still there on a component (twice?), but the class definition is missing:The text was updated successfully, but these errors were encountered: