Невозможно сравнить объект, содержащий функции, связанные с моим классом в React - PullRequest
Новая
       12

Невозможно сравнить объект, содержащий функции, связанные с моим классом в React

0 голосов
/ 07 ноября 2018

Мой класс имеет следующий конструктор: 

constructor() {
    super();

    this.togglePlay = this.togglePlay.bind(this);
    this.toggleMute = this.toggleMute.bind(this);
    this.toggleMaximize = this.toggleMaximize.bind(this);

    this.state = {
      play: false,
      mute: false,
      maximize: false,
      actions: {
        togglePlay: this.togglePlay,
        toggleMute: this.toggleMute,
        toggleMaximize: this.toggleMaximize
      }
    };
  }

В моем тесте я хочу сравнить состояние ... 

it('should have the correct state', () => {
    const wrapper = shallow(<Provider {...minProps} />);

    const expectedState = {
      play: false,
      mute: false,
      maximize: false,
      actions: {
        togglePlay: () => {},
        toggleMute: () => {},
        toggleMaximize: () => {}
      }
    };

    const actualState = wrapper.state();

    expect(expectedState).toEqual(actualState);
  });

При запуске теста я получаю следующую ошибку: 

Expected value to equal:
  {"actions": {"toggleMaximize": [Function bound toggleMaximize], "toggleMute": [Function bound toggleMute], "togglePlay": [Function bound togglePlay]}, "maximize": false, "mute": false, "play": false}
Received:
  {"actions": {"toggleMaximize": [Function toggleMaximize], "toggleMute": [Function toggleMute], "togglePlay": [Function togglePlay]}, "maximize": false, "mute": false, "play": false}

Тест не пройден из-за сравнения функций. Как я могу пройти этот тест?

1 Ответ

0 голосов
/ 07 ноября 2018

Тесты терпят неудачу, потому что вы сравниваете разные ссылки на функции, в своем макете вы создаете анонимные функции, и они явно должны быть привязаны к вашему конструктору. Один из способов выполнить этот тестовый проход состоит в том, чтобы получить доступ к экземпляру компонента, а затем получить доступ к связанным функциям и присвоить им ваше смоделированное состояние: 

it('should have the correct state', () => {
    const wrapper = shallow(<Provider {...minProps} />);

    const expectedState = {
      play: false,
      mute: false,
      maximize: false,
      actions: {
        togglePlay: wrapper.instance().togglePlay,
        toggleMute: wrapper.instance().toggleMute,
        toggleMaximize: wrapper.instance().toggleMaximize
      }
    };

    const actualState = wrapper.state();

    expect(expectedState).toEqual(actualState);
});

Таким образом, вы указываете на те же связанные функции и их ссылки.

Альтернативное решение, которое также может сработать, - использовать jest's expect.any(constructor)

it('should have the correct state', () => {
    const wrapper = shallow(<Provider {...minProps} />);

    const expectedState = {
      play: false,
      mute: false,
      maximize: false,
      actions: {
        togglePlay: expect.any(Function),
        toggleMute: expect.any(Function),
        toggleMaximize: expect.any(Function)
      }
    };

    const actualState = wrapper.state();

    expect(expectedState).toEqual(actualState);
});

Не уверен на 100% об этой последней идее, надеюсь, она поможет!

...