TypeError：expect.addSnapshotSerializer不是函数 - 带有样式化组件的Jest

Question

我遇到了jest和jest-styled-components的问题。

我目前正在使用jest 21.2.1和jest-styled-components 4.9.0来运行我的快照测试。但是，当我运行所有测试时，会抛出此错误消息。

有没有人遇到过类似的问题并且知道如何修复它？我觉得这是一个依赖问题，我尝试了不同的版本，但没有改变。以下是PanelView.test.js的代码：

＆＃13;

＆＃13;

import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

import PanelView from '../PanelView';
import * as exports from '../index';


describe('PanelView', () => {
  test('exports', () => {
    expect(exports).toMatchSnapshot();
  });

  test('PanelView hidden panels', () => {
    const rendering = renderer.create(
      <PanelView
        visiblePanels={{
          filter: false,
          details: false,
          content: false,
        }}
        filter={ 'test' }
        content={ 'test' }
        details={ 'test' }
      />
    ).toJSON();
    expect(rendering).toMatchSnapshot();
  });

  test('PanelView visible panels', () => {
    const rendering = renderer.create(
      <PanelView
        visiblePanels={{
          filter: true,
          details: true,
          content: true,
        }}
        filter={ 'test' }
        content={ 'test' }
        details={ 'test' }
      />
    ).toJSON();
    expect(rendering).toMatchSnapshot();
  });

  test('PanelView hidden mobile', () => {
    window.innerWidth = 300;
    const rendering = renderer.create(
      <PanelView
        visiblePanels={{
          filter: false,
          details: false,
          content: true,
        }}
        filter={ 'test' }
        content={ 'test' }
        details={ 'test' }
      />
    ).toJSON();
    expect(rendering).toMatchSnapshot();
  });

  test('componentWillReceiveProps', () => {
    PanelView.getHidingDirection = jest.fn(PanelView.getHidingDirection);
    const wrapper = renderer.create(
      <PanelView
        visiblePanels={{
          filter: false,
          details: false,
          content: false,
        }}
        filter={ 'test' }
        content={ 'test' }
        details={ 'test' }
      />
    );
    try {
      wrapper.setProps();
    } catch (error) {
      expect(error).toMatchSnapshot();
    } finally {
      expect(PanelView.getHidingDirection).toHaveBeenCalled();
    }
  });

  describe('getHidingDirection', () => {
    test('right', () => {
      const currentPanels = { filter: false, details: false, content: true };
      const nextPanels = { filter: true, details: false, content: true };
      const hidingPosition = PanelView.getHidingDirection(currentPanels, nextPanels);
      expect(hidingPosition).toBe('right');
    });

    test('left', () => {
      const currentPanels = { filter: false, details: false, content: true };
      const nextPanels = { filter: false, details: true, content: true };
      const hidingPosition = PanelView.getHidingDirection(currentPanels, nextPanels);
      expect(hidingPosition).toBe('left');
    });

    test('error', () => {
      try {
        PanelView.getHidingDirection({}, {});
      } catch (error) {
        expect(error).toMatchSnapshot();
      }
    });
  });
});

＆＃13;

＆＃13;

＆＃13;