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

Question

我正在尝试测试组件上的快照，但收到错误 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();
    });
  });
});

第一次测试运行良好

Answer 1

经过数小时的查找 + 删除线后，我发现是 color 导致了问题 here 但这是因为 bug with older jest。

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