CODEWITHSUNDEEP
reactjsreact-testing-library
SDK
SDK

Reputation: 1508

useSelector of Undefined

Hi I am writting unit testing for a component it has redux in it. While testing it , throws an error UseSelector state undefined. UseSelector will be updated once after getting response from the api. Till that its value is undefined. But while unit tetsing it throws error on the first itself . How to overcome this issue.

Test File

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import '@testing-library/jest-dom/extend-expect';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import LinkApplication from '../index';
import {reducer} from '../../../redux/summary/reducer';
let INITIAL_STATES = {
    isFetching: false,
    errorMessage: "",
    requestExtensionErrorMessage: "",
    requestExtensionSuccessMessage: "",
    linkApplicationSuccess: "",
    linkApplicationFailure: null,
    linkLoanSuccessMessage: "",
    linkLoanErrorMessage: "",
    LinkApplicationErrorMessage:"",
  };
function renderWithRedux(
  component,
  { INITIAL_STATES, store = createStore(reducer, INITIAL_STATES) } = {},
) {
  return {
    ...render(<Provider store={store}>{component}</Provider>),
  };
}
it('sumbits the form', async () => {
  const onSubmit = jest.fn();
  const { getByText, getByTestId } = renderWithRedux(
    <LinkApplication onSubmit={onSubmit} />,
  );
  const Dob_Input = getByTestId('dob-input');
  const Phone_Input = getByTestId('phone-input');
  const form = getByTestId('form');
  act(() => {
    fireEvent.keyPress(Dob_Input, {
      target: { value: '1995-09-27' },
    });
    fireEvent.keyPress(Phone_Input, { target: { value: '9500902621' } });
  });
  expect(Dob_Input.value).toBe('1995-09-27');
  expect(Phone_Input.value).toBe('9500902621');
  await act(() => {
    fireEvent.submit(form);
  });
  expect(onSubmit).not.toHaveBeenCalled();
})

Component

const LinkApplication = () => {
  const dispatch = useDispatch();
  let LinkApplicationErrorMessage = useSelector(
    state => state.summary.linkApplicationFailure
  );
}

Error

TypeError: Cannot read property 'linkApplicationFailure' of undefined
const dispatch = useDispatch();
let LinkApplicationErrorMessage = useSelector(
state => state.summary.linkApplicationFailure
^
);

Please help me with that.

Upvotes: 6

Views: 5172

Answers (1)

HMR
HMR

Reputation: 39250

I think you need to mock react-redux

import * as React from 'react';
import { shallow } from 'enzyme';
jest.mock('react-redux', () => ({
  useDispatch: () => {},
  useSelector: () => ({
    your: 'state',
  }),
}));
import Component from './index';
describe('Test component', () => {
  it('Should render and match the snapshot', () => {
    const wrapper = shallow(<Component />);
  });
});

Upvotes: 6

Related Questions