0
264
Viewsbroma con enzima: cómo probar un componente de otra biblioteca
Digamos que tengo un componente <AccordionItem> de 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> Quiero probar si el contenido se muestra en el DOM después de hacer clic en la flecha de expansión.
¿Cómo debo escribir una prueba para ello?
acordeón-elemento.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 answers
Answer question0
Ahora puede usar find para obtener elementos dentro del acordeón por displayName , así:
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
También puede usar selectores css (p. ej .accordion-header ), pero es menos recomendable porque su prueba fallará si bootstrap cambia las clases de los elementos.
it("App", () => { const wrapper = mount(<App />); const firstItem = wrapper.find(".accordion-header").at(0); expect(firstItem.text()).toBe("Accordion Item #1"); });
·
Juan Pablo Isaza
Report
Answer question