Как протестировать компонент, используя hooks-redux? - PullRequest
Новая
       12

Как протестировать компонент, используя hooks-redux?

1 голос
/ 30 июня 2019

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

Как правильно тестировать компоненты с помощью хуков изact-redux?

Todos.js 

const Todos = () => {
  const { todos } = useSelector(state => state);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

Todos.test.js v1 

...

it('renders without crashing', () => {
  const wrapper = shallow(<Todos />);
  expect(wrapper).toMatchSnapshot();
});

it('should render a ul', () => {
  const wrapper = shallow(<Todos />);
  expect(wrapper.find('ul').length).toBe(1);
});

v1 Ошибка: 

...
Invariant Violation: could not find react-redux context value; 
please ensure the component is wrapped in a <Provider>
...

Todos.test.js v2 

...
// imported Provider from react-redux 

it('renders without crashing', () => {
  const wrapper = shallow(
    <Provider store={store}>
      <Todos />
    </Provider>,
  );
  expect(wrapper).toMatchSnapshot();
});

it('should render a ul', () => {
  const wrapper = shallow(<Provider store={store}><Todos /></Provider>);
  expect(wrapper.find('ul').length).toBe(1);
});
Тесты

v2 также не пройдены, поскольку wrapper является <Provider>, и вызов dive() для wrapper вернет ту же ошибку, что и v1.

Заранее спасибо за помощь!

...