测试的Jest覆盖率useEffect更新元素的样式

Question

我是Jest和React的初学者，并使用useEffect函数为React中的滚动按钮组件编写代码，如下所示：

useEffect(() => {
square && (square.style.transform = `translateX(-${scroll}px)`);
});

其中CCD_ 1是每当我点击按钮时更新的组件状态。

我不确定如何在Jest中使用我的代码覆盖，但以下是我迄今为止所做的：

it('test transformX', () => {
const squareMock = jest.fn().mockReturnValue({
style: { transform: jest.fn() } 
});
const {getByLabelText} = render(
<ScrollButton square={ squareMock } />
);
const rightButton = getByLabelText('rightButton');
fireEvent.click(rightButton);
});

从这里开始我该怎么做？提前感谢您！

Answer 1

一般来说，您不应该直接在useEffect中修改DOM，您应该让React为您呈现DOM。例如，您的代码应该更像

const ScrollButton() {
const [scroll] = useState(0);
const [transform, setTransform] = useState(undefined);
useEffect(() => {
setTransform(`translateX(-${scroll}px)`);
}, [scroll]);
return (
<div style={{ transform }}>my square</div>
)
}

然而，如果你特别询问测试useEffect()，你可以awaitwaitFor一个样式更改(或其他DOM更改(，

// inside test
// render component
// next wait for useEffect to run
await waitFor(() => {
expect(queryByText('my square'))
.toHaveStyle({transform: `translateX(-10px)`});
});
// rest of test follows

如果你的useEffect有依赖关系，那么测试这些依赖关系需要像用户一样通过交互来改变这些依赖关系。也就是说，您的测试将模拟单击一个按钮，该按钮的onClick处理程序设置一个setStatescroll并触发useEffect(fn, [ scroll ])副作用。像用户一样测试效果。

不要嘲笑useEffect()或直接测试useEffect。此外，不要指望找到像scroll0或类似的runAllTimers()等效物，这不是考虑测试效果的正确方式。

当依赖关系发生变化时，通过测试预期的副作用来测试效果。