Javascript 如何使用jest.useFakeTimers（）；反应

我有一个简单的组件，我想要ot test setInterval（），基本上在转发计时器之后，快照应该显示3，但始终为0。你知道我的代码出了什么问题吗？谢谢

组成部分：

import React from 'react';

export function Test(): JSX.Element {
  const [counter, setCounter] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setCounter(counter + 1);
    }, 1000);
    return clearInterval(id);
  });
  return <div>{counter}</div>;
}

从“React”导入React；
导出函数测试（）：JSX.Element{
const[counter，setCounter]=React.useState（0）；
React.useffect（（）=>{
常量id=setInterval（（）=>{
设置计数器（计数器+1）；
}, 1000);
返回清除间隔（id）；
});
返回{counter}；
}

测试：

从“React”导入React；
从“react test renderer”导入渲染器，{act}；
从“./Test”导入{Test}；
描述（'测试'，（）=>{
开玩笑。使用faketimers（）；
它（'should xx'，（）=>{
常量树=renderer.create（）；
行动（（）=>{
笑话：提前计时（3000）；
expect（tree.toMatchSnapshot（）；
});
});
});

结果:

// Jest Snapshot v1

exports[`test should xx 1`] = `
<div>
  0
</div>
`;

//Jest快照v1
导出[`test should xx 1`]=`
0
`;

我认为您在创建间隔后正在清除间隔。我的意思是你正在返回clearInterval（id）。相反，只需返回id即可

import React from 'react'; export function Test(): JSX.Element { const [counter, setCounter] = React.useState(0); React.useEffect(() => { const id = setInterval(() => { setCounter(counter + 1); }, 1000); return id; }); return <div>{counter}</div>; }

从“React”导入React；导出函数Test（）：JSX.Element{const[counter，setCounter]=React.useState（0）；React.useffect（（）=>{const id=setInterval（（）=>{setCounter（counter+1）；}，1000）；return id；}）；return{counter}；}

您需要更改useEffect，以便它可以返回清理功能，如：

import React from 'react';

export function Test(): JSX.Element {
  const [counter, setCounter] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCounter(counter + 1);
    }, 1000);

    return () => clearInterval(interval);
  });

  return <div>{counter}</div>;
}

从“React”导入React；
导出函数测试（）：JSX.Element{
const[counter，setCounter]=React.useState（0）；
React.useffect（（）=>{
常量间隔=设置间隔（（）=>{
设置计数器（计数器+1）；
}, 1000);
return（）=>clearInterval（interval）；
});
返回{counter}；
}

import React from 'react';

export function Test(): JSX.Element {
  const [counter, setCounter] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCounter(counter + 1);
    }, 1000);

    return () => clearInterval(interval);
  });

  return <div>{counter}</div>;
}