TypeError: Cannot destructure property 'reintroduceHouseStatus' of '(0 , _reactRedux.useSelector)(...)' as it is undefined

Question

TypeError: Cannot destructure property 'reintroduceHouseStatus' of '(0 , _reactRedux.useSelector)(...)' as it is undefined.

As you see in the above screenshot, the only thing I've failed is passing yarn test.

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { History } from 'history';
import Modal from 'react-modal';

import { House, User } from '../../api';
import { HouseCreateForm, HouseInviteModal, HouseManageModal } from '../../components';
import { houseStatus } from '../../constants/constants';
import { userActions } from '../../store/actions/index';
import { OrangeGlobalState } from '../../store/state';

interface Props {
  history: History;
  house: House;
  me: User;
}

function HousePage(props: Props) {
  const [houses, setHouses] = useState<[House]>();
  const [houseToBeInvited, setHouseToBeInvited] = useState<House>();
  const { getMeStatus, me } = useSelector((state: OrangeGlobalState) => state.user);
  const { reintroduceHouseStatus, renameHouseStatus } = useSelector((
    state: OrangeGlobalState,
  ) => state.house);

When I try the below codes

console.log('reintroduceHouseStatus : ', reintroduceHouseStatus);
console.log('renameHouseStatus : ', renameHouseStatus);

console returns two status when I execute the functions relating to the status.

I don't know why getMeStatus has no problem but reintrudoceHouseStatus and renameHouseStatus have. (already checked state: OrangeGlobalState to which two status referred. Is there any problem with the version of reactRedux? I'm curious if anyone had had the same problem as me.

Thanks.

---

The below codes are from src/App.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';

import App from './App';
import { getMockStore, history } from './tests/mocks';

const mockStore = getMockStore({
  user: {
    me: {},
  },
  necessity: {
    necessities: [],
  },
});

test('renders app with mock store', () => {
  const app = render(
    <Provider store={mockStore}>
      <App history={history} />
    </Provider>,
  );
  expect(app.container.firstChild).toHaveClass('App');
});

Answer 1

It would be great if you could provide some test code, but having faced this issue myself I can give a guess.

In the test file, if you used the render method (or any similar method, render is from the testing-library), you might have created a wrapper for the component, using Provider and created the store using createStore. Here you need to pass the state's reducer, and the default state (in your case, setting state.house to something)

<Provider store={createStore(houseReducer, { house: defaultState })}>
    <HousePage />
</Provider>