开玩笑“toMatchSnapshot”会导致“超出最大调用堆栈大小”

我正在尝试测试组件上的快照，但收到错误RangeError: Maximum call stack size exceeded，虽然当我删除toMatchSnapshot，错误消失了。我在多个组件上都发生过这种情况，这是一个例子。

我的项目是使用 Create React App 创建的，并使用 Jest + Enzyme

堆栈调用

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)

这是我要测试的组件

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;

这是测试

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();
    });
  });
});

第一次测试运行良好

经过几个小时的寻找+删除线条后，我发现它是color引起问题的here https://github.com/Qix-/color/pull/134然而这是因为旧笑话的错误 https://github.com/facebook/jest/issues/4956.

鉴于我正在使用 Create React App，他们尚未更新到包含修复程序的 Jest 22（自 v22.0.4 起）