Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I get TypeError: Enzyme::Selector expects a string, object, or Component Constructor when I try to test react-bootstrap component

I am getting

TypeError: Enzyme::Selector expects a string, object, or Component Constructor when I try to test a component

I tried to use ReactWrapper, use the class of the div and also create an id. Nothing worked.

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();
  });
});

this is the component I'm trying to test:

    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>
    )
}

I expect to find the component or just to see if it exists. At least something.

like image 371
Gim-Cojocaru Raul-Cristian Avatar asked Oct 15 '22 09:10

Gim-Cojocaru Raul-Cristian


1 Answers

Your import is probably incorrect, see index.tsx. Try to modify it as follows:

import { Container } from 'react-bootstrap';

When you face this kind of errors (or similarly),
you can investigate by using wrapper.debug():

console.log({ Container })  // Would have printed "{ Container: undefined }"
console.log(wrapper.debug())  // Also very useful
like image 196
fservantdev Avatar answered Oct 21 '22 05:10

fservantdev