Тестирование в React Redux - PullRequest
Новая
       41

Тестирование в React Redux

0 голосов
/ 09 июля 2019

У меня есть Dashboard компонент, как показано ниже. 

import React, { Component } from 'react';
import DataTable from './DataTable';
import { connect } from 'react-redux';

class Dashboard extends Component {
  render() {
    return <DataTable />;
  }
}

export default connect()(Dashboard);

Мой тест похож на ниже

App.test.js 

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './components/Dashboard';


it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Dashboard />, div);
  ReactDOM.unmountComponentAtNode(div);
});


describe('Addition', () => {
  it('knows that 2 and 2 make 4', () => {
    expect(2 + 2).toBe(4);
  });
});

Я пытаюсь запустить тест с помощью этой команды npm test App.test.js.

Я получаю сообщение об ошибке ниже 

Invariant Violation: Could not find "store" in the context of "Connect(Dashboard)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Dashboard) in connect options.

enter image description here

1 Ответ

1 голос
/ 09 июля 2019

Ваш Dashboard подключен к редуксу, для которого требуется магазин.У вас есть две возможности:

  • использовать Фермент и redux-mock-store для настройки магазина, используемого при монтированииваш компонент.Это плохо поддерживается и приводит к сильной зависимости между Компонентом и хранилищем.

  • экспорт несвязанной панели инструментов (в дополнение к подключенному экспорту по умолчанию) и монтирование (в конце концов стребуется реквизит).Это намного проще и удобнее в обслуживании. 

export class Dashboard extends Component {
   render() {
     return <DataTable />;
   }
}


// Test :

import { Dashboard } from './components/Dashboard';

ReactDOM.render(<Dashboard />, div);

Примечание : я думаю, что вы упростили connect() для примера, потому что здесь он ничего не делает, но если это ваша реальная реализация, вы можете удалить часть соединения и по-прежнему использовать экспорт по умолчанию для вашего теста.

...