useSelector of Undefined

Question

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.

Does this answer your question? [How to test a component using react-redux hooks?](https://stackoverflow.com/questions/56827300/how-to-test-a-component-using-react-redux-hooks) — HMR, Mar 13 '20 at 10:08

score 6 · Answer 1 · answered Mar 13 '20 at 10:06

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 />);
  });
});

useSelector of Undefined

1 Answers1

Linked