如何使用 React 测试库测试支持 Redux 的组件？答案

【问题标题】：How to test a Redux-enabled component with React Testing Library?如何使用 React 测试库测试支持 Redux 的组件？
【发布时间】：2021-02-08 17:13:48
【问题描述】：

我正在努力在不使用 rerender 函数的情况下测试 React 组件。

function renderDom(component, store) {
  return {
    ...render(<Provider store={store}>{component}</Provider>),
    store,
  };
}

it('Should render a TimeEditor component and ensure the +/- buttons function correctly', async () => {
  const store = configureStore(_initialState);
  const spy = jest.spyOn(store, 'dispatch');

  let component = {};
  component = await renderDom(
    <TimeEditor task={store.getState().stdForm.tasks[0]} />,
    store
  );

  const { queryByTestId, findByTestId } = component

  const minusButton = await findByTestId('subtract-minute');
  const plusButton = await findByTestId('add-minute');
  let duration = await findByTestId('start-service-duration');

  expect(duration.innerHTML).toEqual('5');
  expect(minusButton).toBeDisabled();

  await fireEvent.click(plusButton);
  expect(spy).toHaveBeenCalledTimes(1);
  expect(spy).toHaveBeenCalledWith({
    type: 'UPDATE_TASK_TIME',
    payload: { id: '330d8081-6c32-4d62-b0f1-64cdd28d4b75', estimatedMinutes: 6 },
  });

  // rerender(
  //   <Provider store={store}>
  //     {<TimeEditor task={store.getState().stdForm.tasks[0]} />}
  //   </Provider>
  // );

  await waitForElement(() => findByTestId('start-service-duration'));
  duration = await findByTestId('start-service-duration');
  expect(duration.innerHTML).toEqual('6');
});

我已经尝试了所有我能想到的让代码在没有rerender 的情况下工作，但没有任何效果。更准确地说，我知道 Redux Reducer 正在正常工作，但这并没有反映在组件中，因此“5”不会变为“6”。

有没有办法在没有rerender 的情况下运行这个测试？

【问题讨论】：

标签： javascript reactjs redux react-testing-library

【解决方案1】：

使用 Provider 作为包装器可能更容易：

function renderDom(component, store) {
  const WithStore = ({children}) => <Provider store={store}>{children}</Provider>

  return {
    ...render(component, {wrapper: WithStore}),
    store,
  };
}

这样你就不需要在重新渲染时关注提供者了。

【讨论】：