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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With