[React] Integration test a React component that consumes a Render Prop-优快云博客

本文介绍如何利用Enzyme和Jest的快照功能为名为CounterConsumer的React组件编写集成测试。该组件接收初始值，并通过按钮控制计数器的增减。测试确保组件正确渲染及响应点击事件。

In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a component called CounterConsumer that consumes the Render Prop component Counter. This integration test is great because it doesn't necessarily care that CounterConsumer uses Counter behind the scenes, just that it works when integrated.

import React from "react";
import Counter from "./Counter";

export default function CounterConsumer({ initial }) {
  return (
    <Counter initial={initial}>
      {({ increment, decrement, counter }) => (
        <div className="content" style={{ textAlign: "center" }}>
          <h1>{counter}</h1>
          <button className="button is-success" onClick={increment}>
            Increment
          </button>
          <button className="button is-danger" onClick={decrement}>
            Decrement
          </button>
        </div>
      )}
    </Counter>
  );
}

test:

import React from "react";
import ReactDOM from "react-dom";
import toJSON from "enzyme-to-json";
import { mount } from "enzyme";
import "./enzymeSetup";
import CounterConsumer from "./CounterConsumer";

it("accepts an initial value", () => {
  const wrapper = mount(<CounterConsumer initial={1999} />);
  expect(toJSON(wrapper)).toMatchSnapshot();
});

it("increments counter", () => {
  const wrapper = mount(<CounterConsumer />);
  wrapper
    .find("button")
    .at(0)
    .simulate("click");

  expect(toJSON(wrapper)).toMatchSnapshot();
});

it("decrements counter", () => {
  const wrapper = mount(<CounterConsumer />);
  wrapper
    .find("button")
    .at(1)
    .simulate("click");

  expect(toJSON(wrapper)).toMatchSnapshot();
});