Odtnhj

I have been struggling with running test using Jest when I use styled-components.

I took the example code from styled-components/jest

import * as React from 'react'
import styled from 'styled-components'
import * as TestRenderer from 'react-test-renderer'
import 'jest-styled-components'

const Button = styled.button`
 color: red;
`

test('it works', () => 
 const tree = TestRenderer.create(<Button />).toJSON()
 expect(tree).toMatchSnapshot()
 expect(tree).toHaveStyleRule('color', 'red')
)

and I always and up with following error:

 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The test file is .tsx. Jest config is following:

module.exports = 
 "roots": [
 "<rootDir>/src"
 ],
 "transform": 
 "^.+\.tsx?$": "ts-jest"
 ,
 "testRegex": "(/__tests__/.*

Well, eventually I ended up using enzyme for testing. Did not really resolve this, but managed to make it working.

Also decided not to use jest-styled-components since last versions have some troubles on its own. Hopefully I will manage that later.

import * as React from 'react'
import styled from 'styled-components'

const Button = styled.button`
color: red;
`

test('it works', () => 
const tree = shallow(<Button />);
expect(tree).toMatchSnapshot()
)

Needless to say that you must update your jest.config.js to make shallow working:

"snapshotSerializers": [
 "enzyme-to-json/serializer"
]