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 (    
     
            {({ increment, decrement, counter }) => (        
      
          
       
{counter}
          
                   Increment                    
                   Decrement                  
      
      )}    
       );}

 

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(
     );  expect(toJSON(wrapper)).toMatchSnapshot();});it("increments counter", () => {  const wrapper = mount(
     );  wrapper    .find("button")    .at(0)    .simulate("click");  expect(toJSON(wrapper)).toMatchSnapshot();});it("decrements counter", () => {  const wrapper = mount(
     );  wrapper    .find("button")    .at(1)    .simulate("click");  expect(toJSON(wrapper)).toMatchSnapshot();});