Я боролся с запуском теста с использованием Шутка, когда я использую стилизованные компоненты.
Я взял пример кода из 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')
})
и я всегда и со следующей ошибкой:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Это тестовый файл .tsx. Конфигурация Jest следующая:
module.exports = {
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}





Что ж, в конце концов я решил использовать фермент для тестирования. На самом деле не решил это, но сумел заставить его работать.
Также решил не использовать jest-styled-components, так как в последних версиях есть проблемы сами по себе. Надеюсь, мне это удастся позже.
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()
})
Излишне говорить, что вы должны обновить свой jest.config.js, чтобы shallow работал:
"snapshotSerializers": [
"enzyme-to-json/serializer"
]