Jest-styled-components: Can't import chai's expect

[JuanCaicedo]

Hi there! I'm having a problem where I'm not able to import chai's expect to make assertions

import renderer from 'react-test-renderer'
import 'jest-styled-components'
import styled from 'styled-components'
import { expect } from 'chai'

describe('view', () => {
  it('should render break for newline character', () => {
    const StyledDiv = styled.div`
      color: red;
    `

    const tree = renderer.create(<StyledDiv />).toJSON()
    expect(tree).toHaveStyleRule('color', 'red')

  })
})

// Invalid Chai property: toHaveStyleRule 
//      at Error (native)

If I had to guess, I think it's that this module modifies the expect global, which is overriden by importing chai. Note that the above error can be fixed if you import chai's expect with an alias. You would then use the alias for assertions where you want chai's API and the normal expect for styled-components assertions

import { expect as chaiExpect } from 'chai'

Given that this is the officially supported module for testing, it would be great if it could be used with chai! What I'm imagining is maybe a way to register it as a chai plugin similar to what chai-enzyme does. There would perhaps also be some work required to be sure the API matches what chai expects.

Let me know if this is something you would like to support, I'm willing to help! 🙂

[MicheleBertoli]

Thank you very much, @JuanCaicedo.
First of all, I can confirm that this package extends Jest's expect and therefore it doesn't work with chai at the moment.
However, it would be a great addition and I'll be more than happy to review a PR which fixes the issue :)

[MicheleBertoli]

I'm closing this for now, but I'd be still happy to review a PR if someone else is interested in supporting chai.