Реагировать - Тестировать отдельный родительский компонент (без редукса) - PullRequest
Новая
       51

Реагировать - Тестировать отдельный родительский компонент (без редукса)

0 голосов
/ 20 апреля 2020

Я хочу проверить родительский компонент, но я хочу сделать это без избыточности. У меня проблема, потому что у меня ошибка:

Инвариантное нарушение: Не удалось найти «store» ни в контексте, ни в подпунктах «Connect (MarkerList)». Либо оберните компонент root в a, либо явно передайте «store» как реквизит «Connect (MarkerList)».

Мой родительский компонент: 

export class Panel extends React.Component {
  constructor(props) {

  }

  componentDidUpdate(prevProps) {
   ...
  }

  handleCheckBox = event => {
   ...
  };

  switchPanelStatus = bool => {
    ...
  };

  render() {
   ...
  }
}

const mapDispatchToProps = {
  isPanelSelect
};

export const PanelComponent = connect(
  null,
  mapDispatchToProps
)(Panel);

Мой дочерний компонент: 

export class MarkerList extends Component {
  constructor(props) {
      ...   
    };
  }

  componentDidMount() {
   ...
  }

  componentDidUpdate() {
   ...
  }

  onSelect = (marker, id) => {
   ...
  }

  render() {
  ...
  }
}

const mapStateToProps = state => ({
  ...
});

const mapDispatchToProps = {
 ...
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MarkerList);

Тестовый файл Panel: 

import '@testing-library/jest-dom'
import "@testing-library/react"
import React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import {Panel} from '../Panel';


test("test1", async () => {

  const isPanelSelect = jest.fn();
  const location = {
    pathname: "/createMarker"
  }

  const {getByText} = render(  <Panel isPanelSelect={isPanelSelect} location={location} />)
})

Я пытался установить хранилище в качестве реквизита для компонента Panel или обернуть его через провайдера в мой тестовый файл, но это мне не помогает.

1 Ответ

0 голосов
/ 20 апреля 2020

react-redux не работает без store. Вы можете предоставить его по контексту или реквизиту (обычно в тестах). Вы можете предоставить макет версии в тесте. Основная проблема заключается в том, что оба компонента требуют Redux. Вы должны вручную переслать контекст детям, если он указан как prop. Альтернативное решение - монтировать ваш компонент в дереве, поддерживающем Redux: 

import { Provider } from "react-redux";

test("test1", async () => {
  const { getByText } = render(
    <Provider store={createFakeStore()}>
      <Panel isPanelSelect={isPanelSelect} location={location} />
    </Provider>
  );
});
...