如何使用useReducer钩子测试组件？

Question

// src/reducers/FooReducer.js

export function FooReducer(state, action) {
  switch (action.type) {
    case 'update': {
      return action.newState;
    }
// ... other actions
    default:
      throw new Error('Unknown action type');
  }
}

// src/components/BarComponent.js

export function BarComponent() {
  const [state, dispatch] = useReducer(FooReducer, []);

  return (
    {state.map((item) => (<div />))}
  );
}

// src/components/BarComponent.test.js

it('should render as many divs as there are items', () => {
  act(() => {
    const { result } = renderHook(() => useReducer(FooReducer, [1]));
    const [, dispatch] = result.current;
    wrapper = mount(<BarComponent />);
    dispatch({type: 'update', newState: [1, 2, 3]});
  });

  expect(wrapper.find(div)).toHaveLength(3);
});

上面的测试示例不起作用，但用于演示我试图实现的目标。并实际呈现0 div，因为组件中声明的初始状态包含0项。

>

为了测试的目的，我应该如何修改一个reducer的状态或者更改它部署时的initialState？

我习惯于在多个组件中使用Redux还原程序，但是useReducer需要一个传递的initialState。。。这就提出了一个问题：react-hook的reducer是作为一个实例通过多个组件使用，还是始终是两个单独的实例？

Answer 1

在您的示例中，您试图同时测试两件事情，最好作为单独的测试：减速器的单元测试和组件使用减速器的组件测试。

1. 为了测试的目的，我应该如何修改一个reducer的状态或者更改它部署时的initialState

与Redux reducer类似，您的reducer很容易进行单元测试，因为您将它作为纯函数导出。只需将初始状态传递到状态参数，将操作传递到操作：

it('returns new state for "update" type', () => {
  const initialState = [1];
  const updateAction = {type: 'update', newState: [1, 2, 3] };
  const updatedState = fooReducer(initialState, udpateAction);
  expect(updatedState).toEqual([1, 2, 3]);
});

如果您愿意，还可以在useReducer的上下文中对其进行测试：

it('should render as many divs as there are items', () => {
  act(() => {
    const { result } = renderHook(() => useReducer(FooReducer, [1]));
    const [state, dispatch] = result.current;
    dispatch({type: 'update', newState: [1, 2, 3]});
  });

  expect(state).toEqual([1, 2, 3]);
  // or expect(state).toHaveLenth(3) if you prefer
});

以下是useReduer与Redux的不同之处：您可以重用减速器本身，但是如果您有多个useReduer，则从每个减速器返回的状态和调度以及初始状态，将是单独的实例。

为了测试BarComponent在reducer更新时是否更新，您需要一种方法从组件内部触发dispatch，因为您正在组件内部调用useReducer。下面是一个例子：

export function BarComponent() {
  const [state, dispatch] = useReducer(FooReducer, []);

  const handleUpdate = () => dispatch({type: 'update', newState: [1, 2, 3]})

  return (
    <>
      {state.map((item) => (<div />))}
      <button onClick={handleUpdate}>Click to update state</button>
    </>
  );
}

it('should render as many divs as there are items', () => {
  wrapper = mount(<BarComponent />);

  expect(wrapper.find('div')).toHaveLength(0);

  wrapper.find('button').simulate('click');

  expect(wrapper.find('div')).toHaveLength(3);
});

这可能不太现实，因为我正在组件本身中硬编码新数组，但希望它能给你一个想法！