如何开玩笑测试在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);
    });
iCMS 回答:如何开玩笑测试在componentDidMount中具有api调用的已连接组件

我在这里搜索了一个类似的问题,发现您有一些订单错误:

  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} />
本文链接:https://www.f2er.com/2206085.html

大家都在问