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);
    });
  • 相关阅读:
    DevOps与:cloud,IaC,Container,Microservices, Serverless
    2020年devops的7个发展趋势
    bash极简教程
    Jenkins pipeline jenkinsfile的两种写作方式声明式和脚本式
    Jenkins pipeline之声明式的jenkinsfile
    Linux基本开发环境配置git,c++,nodejs,nginx
    Linux centos8 VPS基本配置之SSH
    DevOps常用工具网址
    DevOps技能自查表
    DevOps的工作岗位的要求
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8457882.html
Copyright © 2011-2022 走看看