Как проверить componentDidUpdate, не заканчивая его в цикле - PullRequest
Новая
       37

Как проверить componentDidUpdate, не заканчивая его в цикле

2 голосов
/ 01 октября 2019

Я хочу протестировать componentDidUpdate. Я попытался передать {... props}, не определяя его, а затем componentDidUpdate сначала регистрирует пустой объект, а затем обновление не требуется, и это регистрирует их дважды и показывает, что реквизиты не определены. Как я могу протестировать componentDidUpdate беззаканчивается в цикле.

Мой код 

componentDidUpdate(updateRequired) {
        console.log(this.props);
        if (this.props.updateRequired === true) {
            this.anotherFunc();
        } else {
            console.log("update not required")
        }    
    }
    anotherFunc() {
            this.props.callBackFalse();
    }

Это код, который я хочу проверить 

componentDidUpdate(updateRequired) {
        console.log(this.props);
        if (this.props.updateRequired === true) {
            this.anotherFunc();
        } else {
            console.log("update not required")
        }    
    }

Я пробовал тестировать с setProps, как это 

it('checks if component updates on receiving props', async (done) => {
        const callBackFalse= jest.fn();
        let prevProps = {
            updateRequired : false,
            callBackFalse
        }
        let nextProps = {
            updateRequired : true,
            callBackFalse
        }

        const wrapper = shallow(<Feed {...prevProps} />);
        await wrapper.setProps(nextProps); 
        await expect(callBackFalse).toHaveBeenCalledWith(prevProps,nextProps);
        done();
    })

и это зацикливается (вот как я узнал, что оно зацикливалось, когда он печатает этот код снова и снова на консоли) console.log src / Components / feed / feed.js: 12 

    { updateRequired: true,
      callBackFalse:
       { [Function: mockConstructor]
         _isMockFunction: true,
         (rest of jest mock functions) } }

edit: после перехода с мелкого на монтирование 

it('checks if component updates on receiving props', async (done) => {
        const callBackFalse = jest.fn();
        let prevProps = {
            updateRequired: false,
            callBackFalse
        }
        let nextProps = {
            updateRequired: true,
            callBackFalse
        }
        const wrapper = mount(<Feed {...prevProps} />);
        wrapper.setProps(nextProps);
        done();
        await wrapper.instance.callBackFalse;
        expect(callBackFalse).toHaveBeenCalledTimes(1);
    })

теперь он запускается и проходит тест, но все еще продолжает цикл и продолжает печатать на консоли, как эта

консоль.log src / Компоненты / feed / feed.js: 12 

    { updateRequired: true,
      callBackFalse:
       { [Function: mockConstructor]
         _isMockFunction: true,
         (rest of jest mock functions)} }

1 Ответ

0 голосов
/ 03 октября 2019

В вашем componentDidUpdate вам нужно сравнить prevProps с текущим props, прежде чем делать что-либо, что может потенциально изменить текущее состояние компонента, в противном случае вы можете получить бесконечный цикл, как вы можете видеть надокументация https://reactjs.org/docs/react-component.html#componentdidupdate.

Итак, ваш код должен выглядеть так: 

componentDidUpdate(prevProps) {
  if (prevProps.updateRequired !== this.props.updateRequired) {
    console.log(this.props);
    if (this.props.updateRequired === true) {
        this.anotherFunc();
    } else {
        console.log("update not required")
    }
  }    
}
...