首页 > 解决方案 > 如何使用 jest 和酵素对子功能进行单元测试?

问题描述

我有一个看起来像这样的组件:

const TestComponent = ({ mobile }) => (
  <>
    <div>
      Your estimate
      {!mobile && (
        <InfoButton>
          {target => (
            <Tooltip
              target={target}
            >
              My tooltip text
            </Tooltip>
          )}
        </InfoButton>
      )}
    </div>
  </>
);

Tooltip我正在尝试使用 jest 和酶为此添加一个单元测试,并在我尝试寻找被渲染时遇到问题。我相信这是因为它是由函数渲染的,所以当我开玩笑调试时,这就是我所看到的

  <InfoButton className="infoButton">
    [function]
  </InfoButton>

而且我无法.find().dive()更深入地实际寻找该Tooltip组件。在使用 jest 进行测试时,如何让该功能实际呈现内容?

更新:添加我的测试

it("should render info button with tooltip", () => {
  const wrapper = renderSubject(); // My render fn which randers the parent compoennt
  const testComponent = wrapper
    .find("TestComponent")
    .first()
    .dive();
  expect(testComponent.find("InfoButton").exists()).toBe(true);
  console.log(testComponent.find("InfoButton").debug());
});

标签: javascriptreactjsjestjsenzyme

解决方案


推荐阅读