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

Question

Reducer

// 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);
});

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

1. 我将如何修改化简器的状态或更改用于测试目的的初始状态？

2. 我习惯于在多个组件中使用 Redux 化简器，但 useReducer 需要一个传递的初始状态...这就提出了一个问题：React-hook 的化简器是可以通过多个组件作为单个实例使用，还是总是 2 个单独的实例？

Answer 1

在您的示例中，您尝试同时测试两件事，最好将其作为单独的测试：化简器的单元测试和组件使用化简器的组件测试。

1. 我将如何修改化简器的状态或更改用于测试目的的初始状态？

与 Redux 化简器类似，您的化简器很容易进行单元测试，因为您将其导出为纯函数。只需将您的初始状态传递到state参数中，并将您的操作传递到action：

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
});

2. 我习惯于在多个组件中使用 Redux 化简器，但 useReducer 需要一个传递的初始状态...这就提出了一个问题：React-hook 的化简器是可以作为单个实例通过多个组件使用，还是总是 2 个单独的实例？

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

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

export function BarComponent() {
const [state, dispatch] = useReducer(FooReducer, []);
const handleUpdate = () => dispatch({type: 'update', newState: [1, 2, 3]})
return (
<>
{state.map((item) => (<div key={item} />))}
<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);
});

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