繁体   English   中英

不变违规:元素类型无效(Jest + TSX + StyledComponents)

Invariant Violation: Element type is invalid (Jest + TSX + StyledComponents)

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

当我使用样式组件时,我一直在努力使用Jest运行测试。

我从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。 笑话配置如下:

module.exports = {
    "roots": [
        "<rootDir>/src"
    ],
    "transform": {
        "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "node"
    ]
}
1 个回复

好吧,最终我最终使用酶进行了测试。 并未真正解决此问题,但设法使其正常运行。

还决定不使用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"
]
1 不变违规元素类型无效

伙计们,我需要在RN中定义一个简单的组件,但我不断收到此错误: 在此处输入图片描述 这是我的简单组件代码: 以及将其导入到页面(Intro.js)的方式: 最后,我在app.js中调用包含组件(Intro.js)的页面,如下所示: 我使用的版本: 欣赏你的答 ...

2 不变违规:元素类型无效

这是我面临的错误 任何人都可以帮我解决它。 我被困在这里无法解决这是我的代码: import React from 'react'; import 'react-native-gesture-handler'; import { createAppContainer } from ...

3 不变违规:尝试使用Jest / Enzyme测试React组件时,元素类型无效错误

我在其他地方发现了这些问题,但情况与我本人不太一样,因此正在努力寻找解决问题的方法。 就我而言,该组件工作正常,但尝试安装时出现此错误: 我想挂载它,以便可以测试已创建的选择组件的onChange部分。 该组件如下所示: 这是我尝试安装组件的方式: 我尝试过各种进出口 ...

6 不变违规:元素类型无效 React Native

我正在尝试将一个组件导入我的 App.js 类,但是当我尝试时,我的 android 模拟器出现错误 我的问题是,我检查了我是否在 App.js 中导入了登录组件的默认导入,并且我正在从我可以判断的内容中正确导出登录组件: 应用程序.js 如果可能的话,任何帮助将不胜感激,请帮助我提供更 ...

8 不变违规:元素类型无效-React Native

Git Hub回购在这里: https : //github.com/AliYar-Khan/react-navigation.git 当我要在Genny运动仿真器上运行我的react native应用程序时,此错误显示在红色背景区域中。 不变违规:元素类型无效:预期为字符串(对 ...

9 错误:不变违规:元素类型无效

我在使用 Jest 时发现了这个错误。 这是 header.js 中的内容 我读了一些相关的问题,他们都说这个错误是由import {Component} from './Component.js' 。 但就我而言,我没有使用{ }但仍然有那个错误。 这是错误的详细信息 ...

10 不变违规:使用react-redux的元素类型无效

对不起,我的问题。 我搜索了很多类似的问题,但其中任何一个都不是我的解决方案。 我是React-native的新手。 我在项目中使用2个组件,在这两个组件中,我都使用redux connect()函数。 connect()在Main.js工作正常。 但是在Todos.js我遇到了一 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM