Следите за методом, вызываемым в componentDidMount

Question

Недавно я хотел проверить, что некоторый пользовательский метод вызывается в методе componentDidMount компонента React.

componentDidMount() {
        this.props.actions.getDocuments();
    }

Я использую Jest в качестве моей инфраструктуры тестирования, которая включает в себя jest.fn () дляmocks / spies

    function setup(data) {
        const props = {
            session: {},
            actions: {
                getDocuments: jest.fn()
            }
        };
        const wrapper = mount(<ComponentList {...props} />,
            {
                context: { muiTheme: getMuiTheme() },
                childContextTypes: { muiTheme: React.PropTypes.object.isRequired }
            }
        );

        return {
            props,
            wrapper
        };
    }

describe('compenent:', () => {
    let component;
    describe('Given that the container is loaded', () => {
         beforeAll(() => {
             component = setup();
         });
        it('should call the getDocuments to get the data', () => {
            expect(component.props.actions.getDocuments).toHaveBeenCalled();
        });
    });
    });

Этот код не работает и выдает следующую ошибку:

TypeError: received.getMockName is not a function

      at Object.<anonymous> (src/containers/ComponentList/ComponentList.spec.js:61:158)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Если я использую sinon вместо jest, я все равно получаю ошибку:

expect(jest.fn())[.not].toHaveBeenCalled()

    jest.fn() value must be a mock function or spy.
    Received:
      function: [Function proxy]

      at Object.<anonymous> (src/containers/ComponentList/ComponentList.spec.js:61:158)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Можно ли проверить эту функциональность с помощью Jest или Sinon?И если да, то как?

Вот моя реализация кода:

export class ComponentList extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.actions.getDocuments();
    }
    render() {
        return (
            <div className="allowScroll">
                ....
            </div>
        )
    }
}

ComponentList.propTypes = {
    document: PropTypes.object,
    actions: PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
    return {
        document: state.document
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(componentActions, dispatch)
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(ComponentList)

Answer 1

Неглубокий рендеринг проверит этот тест shallow(<ComponentList {...props} />) и вернет true. Замените mount на shallow.

Answer 2

Попробуйте component.wrapper.props().actions.getDocuments

вместо component.props.actions.getDocuments

Надеюсь, это поможет.