Джест / Фермент |Redux prop не определен в тесте

Question

Я использую React-Redux в подключенном компоненте и хочу проверить, отображается ли конкретный компонент.Чтобы этот компонент отображал 2 вещи должны быть истинными:

1. ListUsers должен быть пустым массивом
2. SecurityMode должен быть базовым.

IЯ уже определил securityMode в моем компоненте Props, без проблем.Но ListUsers prop проходит через редукс.

function mapStateToProps(state) {
  return {
    securityMode: securityModeSelector(state),
    usersList: state.users.list,
    usersListFetching: state.users.listFetching
  };
}

Это моя логика компонента, которую нужно проверить:

renderNoResourceComponent = () => {
    const { usersList, securityMode } = this.props;
    const { selectedGroups } = this.state;

    const filteredData = filterUserData(usersList, selectedGroups);
    if (filteredData && filteredData.length === 0 && securityMode === 'BASIC') {
      return (
        <div className="center-block" data-test="no-resource-component">
          <NoResource>
            .............
          </NoResource>
        </div>
      );
    }
    return null;
  };

И это тест, который я написал:

  describe('BASIC securityMode without Data', () => {
    const props = {
      securityMode: 'BASIC',
      listUsers: () => {},
      usersList: [] // This is the redux prop
    };
    it('should render NoResource component', () => {
      const wrapper = shallow(<UsersOverviewScreen {...props} />);
      const renderUsers = wrapper.find(`[data-test="no-resource-component"]`);
      expect(renderUsers).toHaveLength(1);
    });
  });

Но я получаю сообщение о том, что userLists не определен.Как мне передать этот редукционный реквизит, чтобы мой компонент прошел.`Мне также нужна эта опора для другого набора тестов, для которого нужны данные, которые мне нужно высмеивать.

Может ли кто-нибудь помочь мне в этом?Спасибо ..

Answer 1

Что вы хотите сделать, это экспортировать компонент до его подключения к Redux и передать все необходимые ему реквизиты вручную:

export class UsersOverviewScreen extends Component {
  // ... your functions
  render() {
    return (
      // ... your componont
    );
  }
}

function mapStateToProps(state) {
  return {
    securityMode: securityModeSelector(state),
    usersList: state.users.list,
    usersListFetching: state.users.listFetching
  };
}

export default connect(mapStateToProps)(UsersOverviewScreen);

Теперь в ваших тестах вы можете import { UsersOverviewScreen } form 'path/to/UsersOverviewScreen';.Вы можете создать реквизит и передать его компоненту так:

const mockUsersLists = jest.fn(() => usersList || []);
const wrapper = shallow(<UsersOverviewScreen {...props} usersList={mockUsersLists} />);