reactjs - Jest + Enzyme + ReduxForm unit testing render issue

Question

I am working on getting some unit test around my redux form and running into a lot of issues with it. Currently my test looks like this

describe('testing ForgotPassword functionality', () => {
let ForgotPasswordForm;
let defaultProps = {
    handleSubmit: (fn) => fn
}
let shallow;
let props = {
    forgotPassword: jest.fn()
}
let store = createStore(combineReducers({ form: formReducer, auth: authReducer }));

beforeEach(() => {
    shallow = createShallow({ dive: true })
    ForgotPasswordForm = shallow(
        <Provider store={store}>
            <ForgotPassword {...defaultProps} {...props} />
        </Provider>
    );
});

it('ForgotPassword renders correctly with email', () => {
    expect(ForgotPasswordForm).toMatchSnapshot();
});

it('check event on `Submit` button', () => {
    console.log(ForgotPasswordForm.debug())
    const emailField = ForgotPasswordForm.find('input[name="email"]');
    emailField.simulate('change', { target: {value: '[email protected]'} });
    const submitButton = ForgotPasswordForm.find(Button).find('button');
    submitButton.simulate('click').simulate('submit');
    expect(defaultProps.handleSubmit).toHaveBeenCalledTimes(10);
});
})

I am using material ui hence the use of createShallow. When I debug the shallow render

<Connect(ReduxForm) handleSubmit={[Function: handleSubmit]}
forgotPassword={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation:
   [Function (anonymous)], mock: { calls: [], instances: [], invocationCallOrder: [], 
   results: [] }, mockClear: [Function (anonymous)], 
   mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], 
   mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: 
   [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], 
   mockReturnValue: [Function (anonymous)], 
   mockResolvedValue: [Function (anonymous)], 
   mockRejectedValue: [Function (anonymous)], 
   mockImplementationOnce: [Function (anonymous)], 
   mockImplementation: [Function (anonymous)], 
   mockReturnThis: [Function (anonymous)], 
   mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} />

This creates an issue an issue with me trying to do the find because it doesn't find the html. I must be missing something obvious here. I have tried to dive again but that throws an error

question from:https://stackoverflow.com/questions/65877553/jest-enzyme-reduxform-unit-testing-render-issue

Answer 1

Waitting for answers