0
265
Vistasjest with enzyme - how to test a component from other library
Let's say I have a <AccordionItem> component from react-bootstrap.
AccordionItem.jsx
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
I want to test if the content show in the DOM after I click the expand arrow.
How should I write a test for it?
accordion-item.test.js
import { shallow } from "enzyme";
import React from "react";
import AccordionItem from "./AccordionItem";
it("render AccordionItem Component", () => {
let accordionItem = shallow(<AccordionItem />);
// what's next???
});
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Now you can use find to get elements inside the accordion by displayName, like this:
it("App", () => {
const wrapper = mount(<App />);
const firstItem = wrapper.find("AccordionHeader").at(0);
expect(firstItem.text()).toBe("Accordion Item #1");
});
https://codesandbox.io/s/enzyme-react-bootstrap-mezxb?file=/src/App.test.js
You can also use css selectors (e.g. .accordion-header) but it's less recommended because your test will fail if bootstrap will change the elements' classes.
it("App", () => {
const wrapper = mount(<App />);
const firstItem = wrapper.find(".accordion-header").at(0);
expect(firstItem.text()).toBe("Accordion Item #1");
});
·
Juan Pablo Isaza
Denunciar
Responde la pregunta