如何使用自定义钩子测试 React 组件

Question

给定一个简单的自定义钩子(我知道如何测试(：

const useCounter = () => {
const [value, setValue] = useState(0)
const increase = () => {
setValue(value + 1)
}
return {
value, 
increase
}
}

以及使用它的组件：

const App = (props) => {
const { value, increase } = useCounter()
return (
<div>
<div>{value}</div>
<button onClick={increase}>
plus
</button>
</div>
)
}

如何测试组件？ 什么是"正确的方法"？ 我必须模拟自定义钩子吗？如何？

Answer 1

假设您正在使用 Jest 和 Enzyme 进行单元测试，我会使用 Enzyme 的浅层渲染 API 将App组件包装到浅包装器中。

然后，我将使用.find()查找button元素，并在元素上使用.simulate('click')来模拟按钮上的onClick事件，以便调用increase方法。

之后，我将继续检查预期的结果和行为。

以下是有关如何完成的简要说明：

import { shallow } from 'enzyme';
import * as React from 'react';
describe('<App />', () => {
it('test for onClick', () => {
const wrapper = shallow(<App />);
wrapper.find('button').simulate('click');
// do the rest here
// expect().....
});
})

Answer 2

你不需要嘲笑它。当您在测试中运行App时，它只会使用您的自定义钩子。

如果你想以某种方式修改它的行为，那么你必须模拟它。