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

    In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integration tests are perfect for components that consume a Render Prop component. Likewise, unit tests are important to write for the Render Prop component itself, as you can test each individual unit that makes up the component.

    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>
      );
    }
    import React, { Component } from "react";
    
    export default class Counter extends Component {
      state = { counter: this.props.initial || 0 };
    
      increment = () => this.setState(prevState => ({ counter: prevState.counter + 1 }));
      decrement = () => this.setState(prevState => ({ counter: prevState.counter - 1 }));
    
      render() {
        const { increment, decrement } = this;
        const { counter } = this.state;
    
        return this.props.children({ increment, decrement, counter });
      }
    }

    test:

    import React from "react";
    import ReactDOM from "react-dom";
    import toJSON from "enzyme-to-json";
    import { mount } from "enzyme";
    import "./enzymeSetup";
    import Counter from "./Counter";
    
    it("Calls the Render Prop function", () => {
      let renderFn = jest.fn().mockReturnValue(null);
      const wrapper = mount(<Counter>{renderFn}</Counter>);
    
      expect(renderFn.mock.calls.length).toBe(1);
      expect(wrapper.state("counter")).toBe(0);
    });
    
    it("Accepts an initial value", () => {
      let renderFn = jest.fn().mockReturnValue(null);
      const wrapper = mount(<Counter initial={2012}>{renderFn}</Counter>);
    
      expect(wrapper.state("counter")).toBe(2012);
    });
    
    it("Increments", () => {
      let renderFn = jest.fn().mockReturnValue(null);
      const wrapper = mount(<Counter>{renderFn}</Counter>);
    
      wrapper.instance().increment();
    
      expect(wrapper.state("counter")).toBe(1);
    });
    
    it("Decrements", () => {
      let renderFn = jest.fn().mockReturnValue(null);
      const wrapper = mount(<Counter>{renderFn}</Counter>);
    
      wrapper.instance().decrement();
    
      expect(wrapper.state("counter")).toBe(-1);
    });
  • 相关阅读:
    Logstash配置文件介绍
    ElasticSearch搜索介绍四
    ElasticSearch文档操作介绍三
    ElasticSearch集群介绍二
    ElasticSearch入门介绍一
    Curl中的参数知多少
    sed命令使用介绍(转载)
    实例方法、类方法、静态方法
    函数概述,参数,可变参数,关键字参数,组合参数,递归函数
    startswith()函数与endswith()函数判断文件的开头和结尾
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8457882.html
Copyright © 2011-2022 走看看