时间戳

首页 > 解决方案 > 如何开玩笑测试在componentDidMount中有api调用的连接组件

react-redux - 如何开玩笑测试在componentDidMount中有api调用的连接组件

问题描述

我正在尝试测试一个连接的组件，但它似乎没有在 componentDidMount 函数中进行 api 调用。我需要它来进行 api 调用，这样我就可以根据 api 调用返回的值来测试这个组件将如何呈现。api 调用由 axios 使用 redux 操作进行。一切都存储在 redux 中。

这是我的测试

it('should dispatch an action on mount', () => {
        const component =  shallow(
            <ProcessingStatus store={store}/>
        );
        const didMount = jest.spyOn(component, 'componentDidMount');
        expect(didMount).toHaveBeenCalledTimes(1);

        //console.log(component.html())
        expect(store.dispatch).toHaveBeenCalledTimes(3);

    });

这是componentDidMount我的组件

componentDidMount() {
        const {
            matches: { params: { id } },
            processingStatus,
            securityStatus,
            routingStatus,
            soxStatus,
            remedyStatus,
            user: {
                priv: {
                    my_sox_requests,
                    view_remedy
                }
            }
        } = this.props;
        let params = 'id=' + id;
        if(processingStatus !== undefined){
            processingStatus(params)
            .catch(thrown => {
                console.log(thrown);
            });
        }
        if(securityStatus !== undefined){
            securityStatus(params)
                .catch(thrown => {
                    console.log(thrown);
                });
        }
        if(routingStatus !== undefined){
            routingStatus(params)
                .catch(thrown => {
                    console.log(thrown);
                });
        }
        if(my_sox_requests && my_sox_requests === 'on' && soxStatus !== undefined){
            soxStatus(params)
                .catch(thrown => {
                    console.log(thrown);
                });
        }

        if(view_remedy && view_remedy === 'on' && remedyStatus !== undefined){
            remedyStatus(params)
                .catch(thrown => {
                    console.log(thrown);
                });
        }
    }

我得到的错误是

FAIL  tests/jest/components/common/ProcessingStatus/index.test.js
  <ProcessingStatus />
    ✓ should render with given state from Redux store (90ms)
    ✕ should dispatch an action on mount (7ms)

  ● <ProcessingStatus /> › should dispatch an action on mount

    Cannot spy the componentDidMount property because it is not a function; undefined given instead

      85 |             <ProcessingStatus store={store}/>
      86 |         );
    > 87 |         const didMount = jest.spyOn(component, 'componentDidMount');
         |                               ^
      88 |         expect(didMount).toHaveBeenCalledTimes(1);
      89 |
      90 |         //console.log(component.html())

      at ModuleMockerClass.spyOn (node_modules/jest-mock/build/index.js:841:15)
      at Object.<anonymous> (tests/jest/components/common/ProcessingStatus/index.test.js:87:31)

我试过了const didMount = jest.spyOn(ProcessingStatus.prototype, 'componentDidMount');，我得到的错误是

  ● <ProcessingStatus /> › should dispatch an action on mount

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      85 |         );
      86 |         const didMount = jest.spyOn(ProcessingStatus.prototype, 'componentDidMount');
    > 87 |         expect(didMount).toHaveBeenCalledTimes(1);
         |                          ^
      88 |
      89 |         //console.log(component.html())
      90 |         expect(store.dispatch).toHaveBeenCalledTimes(3);

我设法测试了是否调用了 didmount 但不确定如何检查是否已进行 api 调用。

it('should run componentDidMount', () => {
        spy = jest.spyOn(ProcessingStatus.prototype, 'componentDidMount');
        component = mount(
            <ProcessingStatus store={store}/>
        );
        expect(spy).toHaveBeenCalledTimes(1);
    });

标签： react-reduxjestjsconnected-components

解决方案

我一直在这里搜索类似的问题，发现您有一些订单错误：

  1. 你应该在 shallow(Component) 之前设置 spyOn componentDidMount
  2. 你应该要求在浅组件之后调用 Component.prototype.componentDidMount
jest.spyOn(Component.prototype, 'componentDidMount')

shallow(<Component/>)

expect(Component.prototype.componentDidMount).toHaveBeenCalled();

如果组件希望接收将在 componentDidMount 内部调用的 props 函数，则应在浅组件时添加它们，例如

const mockExpectedFunction= jest.fn()
shallow(<Component expectedFunction={mockExpectedFunction} />

推荐阅读