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

[guillaumekick]

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]

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]

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

[vKongv]

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]

After doing some research on the issue board, I found this can be related to https://github.com/styled-components/jest-styled-components/issues/191

[quantizor]

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

[A11oW]

@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]

This issue was driving me crazy, using the latest versions of SC and JSC. Working fine now after installing [email protected] and [email protected].

[homeslicesolutions-zz]

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]

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]

Could also be because of how the class names are detected. I made an analysis here: https://github.com/styled-components/jest-styled-components/issues/297#issuecomment-639362675