javascript - Jest `toMatchSnapshot` 导致 "Maximum call stack size exceeded"

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 起)