При тестировании код, вызывающий обновления состояния React, должен быть включен в act (...) - PullRequest
Новая
       4

При тестировании код, вызывающий обновления состояния React, должен быть включен в act (...)

0 голосов
/ 06 февраля 2020

При юнит-тестировании с шуткой и энзимом. Возникает следующая ошибка

Предупреждение. Обновление ForwardRef внутри теста не было включено в действие (...).

При тестировании код, вызывающий обновления состояния React, должен быть завернутый в действие (...):

Код компонента здесь: 

import React from "react";
import _cloneDeep from "lodash/cloneDeep";
import _isFunction from "lodash/isFunction";
import FullScreenLoader from "../../../Shared/Components/FullScreenLoader";
import CustomerDetail from './CustomerDetail';

import {
    loadCustomerDetails
} from '../../../Services/CustomerService';
import {
    CUSTOMER_REQUEST,
    CUSTOMER_SUCCESS
} from '../../../Utilities/Constants';


const CustomerDetailContainer = React.forwardRef((props, ref) => {
    let _isMounted = React.useRef(false);
    const [customerDetail, setCustomerDetail] = React.useState({});

    const getCustomerDetails = () => {
        props.dispatch({ type: CUSTOMER_REQUEST });

        loadCustomerDetails(props.match.params.id, props.login.userAWSAttributes['custom:hb_id']).then(res => {
            props.dispatch({ type: CUSTOMER_SUCCESS });
            let customerDetailResponse = res[0];
            if (_isMounted.current) {
                setStateOnMount(customerDetailResponse, setCustomerDetail);
            }
        });
    };



/*eslint-disable */
React.useEffect(() => {
    _isMounted.current = true;
    getCustomerDetails();
}, []);
/*eslint-enable */

const setStateOnMount = (value, callback) => {
    if (_isMounted.current) {
        _isFunction(callback) && callback(_cloneDeep(value));
    }
};

return (
    <>
        {
            Object.keys(customerDetail).length !== 0 ?
                <CustomerDetail customerDetail={customerDetail}
                />
                : <FullScreenLoader />
        }
    </>
);
});

export default CustomerDetailContainer;

, и я попробовал следующую 

import CustomerDetailContainer from '../CustomerDetailContainer';
import mockProps from '../../../../Assets/testData/CustomerDetailTestData';
import CustomerDetail from '../CustomerDetail';
import { mount } from 'enzyme';

jest.mock('../../../../Services/CustomerService', () => ({
    ...jest.requireActual('../../../../Services/CustomerService'),
    loadCustomerDetails: jest.fn(() => {
        return Promise.resolve([mockProps.customerDetail]);
    })
}));
describe('<CustomerDetailContainer />', () => {
    let wrapper;

    beforeEach(() => {
      wrapper = mount(<CustomerDetailContainer />);
    });

    afterEach(() => {
      wrapper.unmount();
    });

    it('load customerDetail', () => {
        expect(customerDetailContainerWrapper.find(CustomerDetail).exists()).toBeTruthy();
      });
});

версию

«реагировать»: «16.10.2», «фермент»: «3.10.0», «фермент-адаптер-реагировать-16»: «1.15.1», «шут-фермент»: «7.1.1»

Любая помощь приветствуется.

...