用酶开玩笑 - 如何测试来自其他库的组件答案

【问题标题】：jest with enzyme - how to test a component from other library用酶开玩笑 - 如何测试来自其他库的组件
【发布时间】：2022-02-27 01:05:30
【问题描述】：

假设我有一个来自react-bootstrap 的<AccordionItem> 组件。

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>

我想测试点击展开箭头后内容是否显示在 DOM 中。
我应该如何为它写一个测试？

手风琴-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???
});

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

现在您可以使用find 通过displayName 获取手风琴内部的元素，如下所示：

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

您也可以使用 css 选择器（例如 .accordion-header），但不推荐使用，因为如果引导程序会更改元素的类，您的测试将失败。

it("App", () => {
  const wrapper = mount(<App />);
  const firstItem = wrapper.find(".accordion-header").at(0);
  expect(firstItem.text()).toBe("Accordion Item #1");
});

【讨论】：