{"action":"opened","issue":{"url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/153","repository_url":"https://api.github.com/repos/styled-components/jest-styled-components","labels_url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/153/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/153/comments","events_url":"https://api.github.com/repos/styled-components/jest-styled-components/issues/153/events","html_url":"https://github.com/styled-components/jest-styled-components/issues/153","id":337537517,"node_id":"MDU6SXNzdWUzMzc1Mzc1MTc=","number":153,"title":"Check for styles applied through a HOC","user":{"login":"DeX3","id":439587,"node_id":"MDQ6VXNlcjQzOTU4Nw==","avatar_url":"https://avatars1.githubusercontent.com/u/439587?v=4","gravatar_id":"","url":"https://api.github.com/users/DeX3","html_url":"https://github.com/DeX3","followers_url":"https://api.github.com/users/DeX3/followers","following_url":"https://api.github.com/users/DeX3/following{/other_user}","gists_url":"https://api.github.com/users/DeX3/gists{/gist_id}","starred_url":"https://api.github.com/users/DeX3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DeX3/subscriptions","organizations_url":"https://api.github.com/users/DeX3/orgs","repos_url":"https://api.github.com/users/DeX3/repos","events_url":"https://api.github.com/users/DeX3/events{/privacy}","received_events_url":"https://api.github.com/users/DeX3/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-02T14:16:10Z","updated_at":"2018-07-02T14:16:10Z","closed_at":null,"author_association":"NONE","body":"Hey,\r\n\r\nI created the following HOC to easily apply a set of conditional styles to a Component:\r\n\r\n```js\r\nimport * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\n\r\nconst withConditionalStyles = (Component) => (predicate, styles) => {\r\n    const wrappedStyles = css`\r\n        ${(props) => predicate(props) && styles};\r\n    `;\r\n\r\n    return styled(Component)(wrappedStyles);\r\n};\r\n```\r\n\r\nThe component works fine and does exactly what you'd expect outside of tests.  Now I wanted to test this HOC with the following:\r\n\r\n```js\r\nimport * as React from 'react';\r\nimport renderer from 'react-test-renderer';\r\nimport styled, { css } from 'styled-components';\r\nimport 'jest-styled-components';\r\n\r\nimport withConditionalStyles from '../withConditionalStyles';\r\n\r\ndescribe('#utils', () => {\r\n    describe('#withConditionalStyles', () => {\r\n        it('should apply styles conditionally', async () => {\r\n            const div = styled.div`\r\n                font-weight: bold;\r\n            `;\r\n\r\n            const ConditionallyStyledDiv = withConditionalStyles(div)(\r\n                () => true,\r\n                css`\r\n                    color: red;\r\n                `,\r\n            );\r\n\r\n            const tree = renderer.create(<ConditionallyStyledDiv />).toJSON();\r\n\r\n            expect(tree).toHaveStyleRule('font-weight', 'bold');\r\n            expect(tree).toHaveStyleRule('color', 'red');\r\n        });\r\n    });\r\n});\r\n\r\n```\r\n\r\nBut it seems like `jest-styled-components` does not pick up the conditional `color: red` style at all:\r\n\r\n```\r\n  ● #utils › #withConditionalStyles › should apply styles conditionally\r\n\r\n    Property not found: \"color\"\r\n```\r\n\r\nActually, the supplied predicate (that's just returning `true`) isn't being called at all. Any ideas?"}}
{"actor":{"display_login":"DeX3"}}