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

Jest`toMatchSnapshot`导致＆＃34;超出最大调用堆栈大小＆＃34;

1 个答案: