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

时间:2017-11-21 11:58:52

标签: reactjs jestjs styled-components

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

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

enter image description here

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



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;

0 个答案:

没有答案