zoukankan      html  css  js  c++  java
  • [React] Integration test a React component that consumes a Render Prop

    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();
    });
  • 相关阅读:
    BZOJ5104 二次剩余板子
    BZOJ5329 [Sdoi2018]战略游戏 圆方树+虚树
    BZOJ1095 动态点分治
    BZOJ3992: [SDOI2015]序列统计
    kd-tree板子
    thusc2018翻车记
    BZOJ5336 DP套DP
    BZOJ4316 仙人掌DP
    问题 F: 最小花费
    问题 C: 热浪
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8457885.html
Copyright © 2011-2022 走看看