Jest `toMatchSnapshot` causes “Maximum call stack size exceeded”

问题

I am trying to test a snapshot on a component and I get the error RangeError: Maximum call stack size exceeded, though when I remove toMatchSnapshot, the error is gone. This has happened to me with multiple components, here is one example.

My project was created with Create React App and uses Jest + Enzyme

Stack call

FAIL  src/components/Dashboard/Pipeline/Pipeline.test.js
  ● Pipeline Component › Pipeline Item › should render

    RangeError: Maximum call stack size exceeded

      at Object.it (src/components/Dashboard/Pipeline/Pipeline.test.js:20:181)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Here is the component I'm trying to test

import React from 'react';
import PropTypes from 'prop-types';
import { Circle } from 'rc-progress';
import Color from 'color';
import './PipelineItem.css';

const PipelineItem = ({ role, color, count, total, value }) => (
  <div className="pipeline">
    <span className="role" style={{ borderColor: color }}>
      {role}
    </span>
    <div className="progress">
      <Circle
        percent={count / total * 100}
        gapDegree={70}
        gapPosition="bottom"
        strokeWidth="6"
        strokeLinecap="square"
        strokeColor={color}
      />
      <div className="completed">
        <span className="count">
          {count} / {total}
        </span>
      </div>
    </div>
    <div className="value" style={{ backgroundColor: Color(color).fade(0.85) }}>
      <div className="wrap" style={{ borderColor: color }}>
        <span className="title">Value</span>
        <span className="value">${value}</span>
      </div>
    </div>
  </div>
);

PipelineItem.defaultProps = {
  value: 0,
  total: 0,
  count: 0,
};

PipelineItem.propTypes = {
  role: PropTypes.string,
  color: PropTypes.string,
  count: PropTypes.number,
  total: PropTypes.number,
  value: PropTypes.number
};

export default PipelineItem;

Here is the test

import React from 'react';
import Pipeline from './Pipeline';
import PipelineItem from './PipelineItem';

describe('Pipeline Component', () => {
  describe('Pipeline Wrap', () => {
    it('should render', () => {
      expect(shallow(<Pipeline />)).toMatchSnapshot();
    });
  });
  describe('Pipeline Item', () => {
    const props = {
      role: 'Loan Officer',
      color: '#2ae',
      count: 100,
      total: 150,
      value: 15000
    };
    it('should render', () => {
      expect(shallow(<PipelineItem {...props}/>)).toMatchSnapshot();
    });
  });
});

The first test runs fine