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
Bring compatibility with v4 #191
Comments
Hello @santino, thanks for opening this issue. The main priority for this repo is now making the library compatible with v4. I pushed a work-in-progress branch where I'm experimenting, and of course some help is greatly appreciated :) |
I see SC v4 has been released recently. Can we have an estimation of the release v4-compatible version of this library? I found my tests just failed on the latest stable version of |
Hey @Ky6uk, thanks for your comment. |
@MicheleBertoli yes, I can check it on my codebase to find problems. Do we have this branch as a npm package? Maybe under |
Thank you very much @Ky6uk, I just published |
I see |
Hi. I just upgraded styled-components and I am facing issues when using shallow rendering as well. Here, for reference a simple example on codesandbox It contains just a simple component, maybe it helps you to confirm that everything works as expected. Basically the test fails with information:
I already googled that enzyme shallow rendering calls life cycle methods by default, so I just tried to disable those with
it looks like I need to understand how this lib works, so will try to help with fixing - but I might need some help :P Anything besides unit tests passing that I should be aware of? |
Thanks for the heads up @Ky6uk, I pushed a new version on Hey @dumbNickname, thank you very much for your comment. |
Hey. I already created a pull request. I am almost done with next commit. The test that is still not green is failing due to: styled-components/styled-components#2071. I will try to enable next disabled tests and make those green. Nevertheless will need a bit more time. Please let me know when you make up your mind regarding enzyme. As there is a global option to disable calling life cycle methods on enzyme configuration, I would ask you to keep it supported and publish my changes as beta release if possible. |
This is awesome! Thank you very much for working on this, @dumbNickname. |
Been following this with interest :) it seems the PR is ready- could it be merged? Really want to upgrade to SC4 and this is holding us back ;) |
Hello @CoenWarmer, thanks for your comment. In order to use the work-in-progress version you need to run: |
@MicheleBertoli even using Consider the following as an example: const MyStyledComponent = styled.div`
padding-left: 0;
`;
const OverriddenMyStyledComponent = styled(MyStyledComponent)`
//👇🏻 1024px
${media.lg`
padding-left: ${themeGet('space.3')}px; // 👈🏻 1024px
`};
`;
const wrapper = mount(<OverriddenMyStyledComponent />);
expect(wrapper).toHaveStyleRule('padding-left', '16px', { // 16px is the value of space[3] from theme
media: `screen and (min-width: 1024px)`,
}); Media helper: export const media = Object.keys(breakpointsMap).reduce(
(accumulator, label) => {
accumulator[label] = (strings, ...args) =>
css`
${mediaQuery(label)} {
${css(strings, ...args)};
}
`;
return accumulator;
},
{},
); I get the following assertion error from jest:
Do you have any suggestions on this? |
Thanks for your comment, @karolisgrinkevicius. |
@MicheleBertoli unfortunately those helpers (mWT, sWT) doesn't work with SC 4 because context logic has been changed. |
Thanks for your comment, @Ky6uk. |
Hi everyone! In my
It seems that we have common problem, has anyone found solution? |
@ruchern no problem! There is mounting pressure from |
Another important issue to follow: enzymejs/enzyme#1973 |
@csvan |
@ruchern not sure, hooks is still very new and not too many major libs depend on it to work. Would be nice to see support anyway of course |
Getting |
I'm getting the same thing as @cihati. I'd be happy to use the published Is it possible to quickly update the peer dep version range for |
hey @csvan! enzymejs/enzyme#1960 and enzymejs/enzyme#1966 have been solved by now, are there any updates on this one? |
Same issue using jest-styled-components@next:
Repro steps:
|
Hey @rodrijuarez , this repo is maintained my @MicheleBertoli, not me :) Yes, I noted that a lot of the most important issues and PRs have been marked as resolved in Enzyme recently. Right now the best thing to do is wait for their next minor release and see how much it solves. |
Having issues with
I see the master branch in the jest-styled-components repo shows the following in {
"devDependencies": {
"styled-components": "^3.4.5"
},
"peerDependencies": {
"styled-components": "^2.0.0 || ^3.0.2"
}
} I currently have styled-components@^4.2.0 in my own project. This appears to be an old issue (#183 closed, 3 open pr #184 #191 #304 ). Is there a fix in place soon? |
Currently awaiting this to be updated, as all shallow mounting on testing our components fail. Wondered if there was any update to this? I noticed that Enzyme have done a release as of 6 days so there could be some updates that might be now applicable for this. There is a PR that is currently open, and have tried to install it locally but this is proving difficult to check. |
v6.3.3 loosens the peerDependencies, but the library already works with styled-components v4 👍 |
We are still having issues with our shallow mounted tests, more specifically finding applied styles with toHaveStyleRule. Here is a code sandbox which shows our test failing (have to click on open in editor) after upgrading to styled components version 4.3.0 (plus other dependencies). Previously this test is working fine with styled components version 3.4.5. In the above sandbox if I change back to this version the exact same test is working fine. |
For those who got issues with mountWithTheme and shallowWithTheme this is how we ended up with import { ThemeProvider } from "styled-components";
import { yourTheme } from "path-to-your-theme";
const getThemeProviderWrappingComponent = theme => ({ children }) => (
<ThemeProvider theme={yourTheme}>{children}</ThemeProvider>
);
export const shallowWithTheme = (tree: React.Node, theme: Object = yourTheme) => {
return shallow(tree, {
wrappingComponent: getThemeProviderWrappingComponent(theme)
})
.dive()
.dive();
};
export const mountWithTheme = (component: React.Node, theme: Object = yourTheme) => {
const wrapper = mount(component, {
wrappingComponent: getThemeProviderWrappingComponent(theme)
});
return wrapper;
}; |
@MicheleBertoli why the |
Error: |
In our company we have a lot of tests written with We are migrating to material v4 and getting this problem as well. "@material-ui/core": "^4.3.1",
"@material-ui/icons": "^4.2.1",
"styled-components": "^4.3.2",
"jest": "^23.0.0",
"jest-styled-components": "^6.3.3",
"enzyme": "^3.10.0",
"enzyme-to-json": "^3.4.0", |
I am also facing the same issue. // Text.js Where I use a prop in a styled component to choose between rtl and ltr import React from 'react';
import styled from 'styled-components';
export const Text = ({isA = 'span', isRtl, children, className, ...restProps}) => {
const Tag = isA;
return (
<Tag className={className} {...restProps}>{children}</Tag>
);
};
export const StyledText = styled(Text)`
direction: ${({isRtl}) => (isRtl ? "rtl" : "ltr")}
`; // Text.test.js where I want to check that my StyledText Component has a style of direction : ltr describe('<StyledText/>', () => {
it('should have', () => {
// when
const wrapper = shallow(<StyledText isRtl={true}>{sampleText}</StyledText>);
// then
// console.log(wrapper.debug());
expect(wrapper).toHaveStyleRule('direction', 'ltr');
});
}); // Error message when tests run: FAIL src/__tests__/Text.test.js
● <Text /> › <StyledText/> › should have
No style rules found on passed Component
68 | // then
69 |
> 70 | expect(wrapper).toHaveStyleRule('direction', 'ltr');
| ^
71 | });
72 | });
73 | });
|
Hi @MicheleBertoli,
just a quick one to see what your plan is to add compatibility with styled-components v4.
Right now jest-styled-components cannot really be used with v4; the main issue I came across so far is that when using Enzyme Shallow Rendering this renders an element like the following:
<BaseStyledComponent theme={{...}} forwardedClass={{...}} forwardedRef={{...}} />
The
getHTML
function will print this when that component is passed:<style data-styled="" data-styled-version="4.0.0-beta.5"> /* sc-component-id: sc-bdVaJa */ </style>
Which means no styles rules can be found.
Everything works normally when using Full DOM Rendering since that would render
Giving then access to the actual styled component (in the example above the
label
).The text was updated successfully, but these errors were encountered: