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();
    });
  • 相关阅读:
    什么是method swizzling
    手机安全卫士——手机防盗页面
    手机安全卫士——在设置中心 自定义view和自定义属性
    手机安全卫士——主界面的开发
    手机安全卫士——闪屏页相关处理
    Android开发学习——自定义View
    C#开发学习——SqlHelper的应用
    基本的SQL语句
    C#开发学习——常用的正则表达式
    C#开发学习——存储过程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8457885.html
Copyright © 2011-2022 走看看