Jest-styled-components: TypeError: expect(...).toHaveStyleRule is not a function on a lerna project

[jenniferOlsen]

Hello,
I'm trying to get this working on a lerna monorepo and running into some issues. I don't have a ton of experience with styled-components, jest, or lerna...so it's possible I'm overlooking something obvious.

The snapshots run, but I don't get the css rendered. If I use toHavestyleRule() I get TypeError: expect(...).toHaveStyleRule is not a function. So, it looks like jest-styled-components is being ignored completely. I looked at the instructions at https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page, but I'm not actually getting any warnings so that may not be the issue.

I've set up a minimal non-working repo, but I'll include the most relevant bits here too. I appreciate any help you can give me.

package.json 
     "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.4",
    "jest": "^22.4.3",
    "jest-styled-components": "^5.0.1",
    "lerna": "^2.11.0",
    "styled-components": "^3.2.5"

jest.config.js
module.exports = {
  setupFiles: ['raf/polyfill', './config/enzyme.js'],
  snapshotSerializers: ['enzyme-to-json/serializer'],

  moduleNameMapper: {
    'styled-components': '<rootDir>/node_modules/styled-components'
  }
}

const StyledButton = styled.button
  color: white;
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  outline: 0;
  margin-bottom: 30px;
  width: 100%;

export const Button = props => <StyledButton {...props} />



md5-4bfababebae418464582ceaf6d1c7094



test
import React from 'react'
import { mount } from 'enzyme'
import 'jest-styled-components'

import { Button } from '.'

describe('Button Component', () => {
  it('renders correct button styles', () => {
    const wrapper = mount(<Button />)
    expect(wrapper).toMatchSnapshot()
    expect(wrapper).toHaveStyleRule('color', 'white')
  })
})

[MicheleBertoli]

Hello @jenniferOlsen, you need to put a ^ in the moduleNameMapper entry otherwise you are matching all the modules that contain "styled-components" (jest-styled-components included).

moduleNameMapper: {
  '^styled-components': '<rootDir>/node_modules/styled-components',
}

I hope this helps.