Нарушение инварианта: недопустимый тип элемента (Jest + TSX + StyledComponents) - PullRequest
Новая
       21

Нарушение инварианта: недопустимый тип элемента (Jest + TSX + StyledComponents)

0 голосов
/ 14 ноября 2018

У меня были проблемы с запуском теста с использованием Jest , когда я использую styled-components .

Я взял пример кода из 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"
    ]
}

1 Ответ

0 голосов
/ 17 ноября 2018

Ну, в конце концов я использовал энзим для тестирования. На самом деле это не помогло, но удалось заставить его работать.

Также решили не использовать 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"
]
...