Издевательский магазин Redux при тестировании компонентов React? - PullRequest
Новая
       8

Издевательский магазин Redux при тестировании компонентов React?

0 голосов
/ 25 октября 2018

Я использую React и Redux.У меня есть компонент, который загружает ChildComponent и в зависимости от состояния Redux также будет загружать MainComponent 

    const ChooseIndex = ({ appInitMount }) => {
      return (
        <>
          <ChildComponent />
          {!appInitMount && <MainComponent />}
        </>
      );
    };


    const mapStateToProps = ({ main }) => {
      return {
        appInitMount: main.appInitMount
      };
    };

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

Я пытаюсь написать тест, чтобы проверить, загружен ли ChildComponent: 

    import React from "react";
    import { render } from "react-testing-library";
    import ChooseIndex from "../choose-index";

    test("ChooseIndex should call ChildComponent", () => {
      const wrapper = render(
        <ChooseIndex />
      );
    });

Iполучить эту ошибку:

Ошибка: Uncaught [Нарушение инварианта: Не удалось найти «store» ни в контексте, ни в подпунктах «Connect (ChooseIndex)».Либо оберните корневой компонент в a, либо явно передайте «store» в качестве реквизита «Connect (ChooseIndex)».]

Должен ли я издеваться над Redux, передавая литерал объекта в ChooseIndex?Или я должен создать хранилище Redux (как это делает мое реальное приложение) для каждого теста?

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Попробуйте отобразить ваш компонент так: 

render(
  <Provider store={store}>
    <ChooseIndex />
  </Provider>
)

И передайте фактический магазин, который вы используете в своем приложении.Таким образом, вы тестируете реальную логику, которую будете использовать в производстве.Вам также все равно, какие действия отправляются, а что в государстве.Вы смотрите на то, что визуализируется, и взаимодействуете с пользовательским интерфейсом, что и имеет значение в конце.

Отделение компонента от Redux и тестирование обоих по отдельности противоречит цели react-testing-library.Вы хотите протестировать свое приложение, как реальный пользователь.

0 голосов
/ 25 октября 2018

Если вы ознакомились с разделом Письменные тесты в документах Redx, существует пример тестирования подключенного компонента.

при импорте [Компонент, подключенный к серверу], вы на самом деле держите компонент-оболочку, возвращаемый connect (), а не сам компонент App. Если вы хотите проверить его взаимодействие с Redux, это хорошая новость: вы можете обернуть его в магазине, созданном специально для этого модульного теста .Но иногда вы хотите протестировать только рендеринг компонента без хранилища Redux.

Чтобы иметь возможность протестировать сам компонент приложения без необходимости иметь дело с декоратором, мы рекомендуем вамтакже экспортируйте недекорированный компонент

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

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class App extends Component {
  /* ... */
}

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)
...