Jest компонент, который передает функции в качестве опоры

Question

Я хочу протестировать свой элемент item, но он содержит функцию isLoading () в качестве prop. Я вызываю эту функцию в моем компоненте, чтобы установить состояние в родительском (контейнере). Когда я пытаюсь его смонтировать, jest выдает ошибку TypeError: this.props.isLoading не является функцией.

//Container.js
import React, { Component } from 'react';
import Item from './Item';
import React, { Component } from 'react';
import Item from './Item';

class Container extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: false,
    };

  changeIsLoading(bool) {
    this.setState({
      isLoading: bool,
    });
  }

  render() {
    return (
      <div className="container">
        <Item
          className="item"
          isLoading={this.changeIsLoading}
          styles={this.props.styles}
        />

      </div>
    );
  }
}


// Item.test.js
import React from 'react';
import Container from '../containers/Container';
import { shallow, mount } from 'enzyme';
import changeIsLoading from '../containers/Container';

describe('Container', () => {
    const tree = mount(
      <Item
        isLoading={changeIsLoading(false)}
        styles={style}
      />
    );
    expect(tree).toMatchSnapshot();
  });
});

Answer 1

Обратите внимание на то, что вы не проходите функцию в своем тесте.

  <Item
    isLoading={changeIsLoading(false)}
    styles={style}
  />

Вы передаете результат вызова changeIsLoading(false).

Какое бы значение оно не возвращало, оно будет значением, которое компонент Item попытается вызвать как this.props.isLoading().

И это не удастся, потому что this.props.isLoading это не функция, это то, что changeIsLoading(false) вернул.

Что вы, вероятно, хотите сделать, это передать changeIsLoading как isLoading prop компоненту Item.

  <Item
    isLoading={changeIsLoading}
    styles={style}
  />