当我尝试测试 react-bootstrap 组件时，我得到 TypeError: Enzyme::Selector expects a string, object, or Component Co

Posted 2023-02-21

【中文标题】当我尝试测试 react-bootstrap 组件时，我得到 TypeError: Enzyme::Selector expects a string, object, or Component Constructor

【英文标题】：I get TypeError: Enzyme::Selector expects a string, object, or Component Constructor when I try to test react-bootstrap component

【发布时间】：2020-03-03 20:43:32

【问题描述】：

我来了

TypeError: Enzyme::Selector 需要一个字符串、对象或组件 当我尝试测试组件时的构造函数

我尝试使用ReactWrapper，使用 div 的类并创建一个 id。没有任何效果。

import React from "react";
import Dashboard from "../Containers/Dashboard/Dashboard";
import  BrowserRouter as Router  from 'react-router-dom'
import  configure, shallow, mount  from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Container from 'react-bootstrap';
let container = null;
configure(adapter: new Adapter());

describe('<Dashboard />', () => 
  let wrapper;

  beforeEach(() => 
    const fakeTopic = [
      
        "name": "javascript",
        "display_name": "JavaScript",
        "short_description": "JavaScript (JS) is a lightweight interpreted programming language with first-class functions.",
        "description": "JavaScript (JS) is a lightweight interpreted or JIT-compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.",
        "created_by": "Brendan Eich",
        "released": "December 4, 1995",
        "created_at": "2016-11-28T18:41:00Z",
        "updated_at": "2019-11-06T15:05:24Z",
        "featured": true,
        "curated": true,
        "score": 7954.724
      
    ]
      wrapper = shallow(<Router><Dashboard jsTrendingTopics=fakeTopic ><Container></Container></Dashboard></Router>);
  );

  it('should render <Container /> when recieving topics', () => 

      expect(wrapper.find(Container)).toBeTruthy();
  );
);

这是我要测试的组件：

    return (
        <Container id="container1">
            props.jsTrendingTopics.length > 0 &&
                <CardDeck>
                    <Row>
                        props.jsTrendingTopics.map((jsTrendingTopic, index) =>
                            <Col md="auto" className="margin-top margin-left" key=index>
                                <Card  style= width: '18rem' >
                                    <Card.Img variant="top" src=require(`../../assets/$jsTrendingTopic.name.png`) />
                                    <Card.Body>
                                        <Card.Title>jsTrendingTopic.display_name</Card.Title>
                                        <Link to=`/language/$jsTrendingTopic.name`>
                                            <Button variant="primary">Details</Button>
                                        </Link>
                                    </Card.Body>
                                </Card>
                            </Col>
                        )
                    </Row>
                </CardDeck>
            

        </Container>
    )

我希望找到该组件，或者只是看看它是否存在。至少有些东西。

【问题讨论】：

您是否尝试过在不将其包裹在路由器中的情况下对其进行测试？检查您正在正确导出仪表板的另一件事。

【参考方案1】：

您的导入可能不正确，请参阅index.tsx。尝试如下修改：

import  Container  from 'react-bootstrap';

当您遇到此类错误（或similarly）时， 你可以使用wrapper.debug()进行调查：

console.log( Container )  // Would have printed " Container: undefined "
console.log(wrapper.debug())  // Also very useful