Skip to content
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

No style rules found on passed Component - Enzyme - styled() #234

Open
guillaumekick opened this issue Feb 25, 2019 · 10 comments
Open

No style rules found on passed Component - Enzyme - styled() #234

guillaumekick opened this issue Feb 25, 2019 · 10 comments

Comments

@guillaumekick
Copy link

guillaumekick commented Feb 25, 2019

Hi,
I hope that someone could explain why the followinh test is failed with error "No style rules found on passed Component".

Thank you for yours replies

/***** package.jon *****/
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.9.1",
"enzyme-to-json": "^3.3.5",
 "jest-styled-components": "^6.3.1",
"styled-components": "^3.4.9",
 "styled-theming": "^2.2.0",

/***** MyComponent.js *****/
import { Spin } from 'antd'

const StyledComponent = styled (Spin)``

export default StyledComponent


/***** mycomponent.test.js *****/
import React from 'react'
import Enzyme, { shallow, } from 'enzyme'
import { ThemeProvider } from 'styled-components'
import MyComponent from './MyComponent

const theme = {
  primary: 'red',
}

const shallowWithTheme = tree => {
  const context = shallow(<ThemeProvider theme={theme} />)
    .instance()
    .getChildContext()
  return shallow(tree, { context })
}

const mountWithTheme = tree => {
  const context = shallow(<ThemeProvider theme={theme} />)
    .instance()
    .getChildContext()

  return mount(tree, {
    context,
    childContextTypes: ThemeProvider.childContextTypes
  })
}

/* Not working */
test('renders component spin default witout error', () => {
  const wrapper = shallowWithTheme(<MyComponent />)
  expect(wrapper).toHaveStyleRule('color', theme.primary)
})



/* working */
test('renders component spin default witout error', () => {
  const wrapper = mountWithTheme(<MyComponent />)
  expect(wrapper).toHaveStyleRule('color', theme.primary)
})

Should we use always mount whith styled(myComponent) ?
And shallow with styled.div ( E.g) ?

@rossmoody
Copy link

I'm having a similar issue and this may not be related but I did notice you're missing a '.

import MyComponent from './MyComponent'

@guillaumekick
Copy link
Author

@rossmoody : thx for the reply, you're right, i forgot it in my example code when i "copy /paste" it

@vKongv
Copy link

vKongv commented Apr 9, 2019

I also having similar issues when performing snapshot test in my project and it only happen to custom component that being wrapped by styled, eg: styled(MyComponent). When running the snapshot test using mount, I got these interesting DOM output from enzyme that potentially is the root cause of the problem:

     <StyledComponent
       forwardedComponent={...} // MyComponent information is here and it is being nested here instead of render as DOM
       forwardedRef={null}

The following is my test case on the component:

it('should match snapshot', () => {
      const wrapper = mount(<Component />);
      expect(toJson(wrapper)).toMatchSnapshot()
    });

I am not sure whether this is an issue for enzyme or this plugin, anyone can help?

@vKongv
Copy link

vKongv commented Apr 9, 2019

After doing some research on the issue board, I found this can be related to #191

@quantizor
Copy link
Contributor

@guillaumekick When I see this error it's usually because the enzyme-to-json serializer isn't set up in the jest config.

@A11oW
Copy link

A11oW commented Oct 31, 2019

@guillaumekick When I see this error it's usually because the enzyme-to-json serializer isn't set up in the jest config.

I have set up and have "No style rules found on passed Component"

@lukebettridge
Copy link

This issue was driving me crazy, using the latest versions of SC and JSC. Working fine now after installing styled-components@4.4.1 and jest-styled-components@6.0.0.

@homeslicesolutions-zz
Copy link

I have the same issue now and I'm running "styled-components": "^5.0.1" and "jest-styled-components": "^7.0.0". enzyme-to-json is also setup correctly in my jest.config.js

@chrillewoodz
Copy link

chrillewoodz commented Apr 16, 2020

You have to wrap your styled component in a react component for some reason for it to work...

export const FlexGrid = () => {
  return (<Grid></Grid>);
}

If I just try to shallow render Grid directly then it doesn't work..

EDIT: This doesn't seem to work all the time....

@Tokimon
Copy link

Tokimon commented Jun 24, 2020

Could also be because of how the class names are detected.
I made an analysis here:
#297 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants