reactjs - useEffect() 的酶/Jest 测试
问题描述
我有一个看起来像这样的组件:
const PersonalGreeting = (): ReactElement => {
const [date, setDate] = useState(new Date())
useEffect(() => {
const timer = setInterval(() => {
setDate(new Date())
}, 60000)
return () => {
clearInterval(timer)
}
}, [])
return (
<div>{date}></div>
)
}
我遇到了一个错误,Jest: "global" coverage threshold for functions (89%) not met: 88.73%
当我查看日志时,它特别说我的return ()
和clearInterval(timer)
inuseEffect()
没有被测试。这是一个屏幕截图:
老实说,我正在拔头发,试图弄清楚他们想让我测试什么。这是我测试过的:
describe('PersonalGreeting', () => {
const setTimeOfDay = jest.fn()
// eslint-disable-next-line
const useToggleMock: any = (initialState: string) => [
initialState,
setTimeOfDay
]
beforeEach(() => {
jest.spyOn(React, 'useState').mockImplementation(useToggleMock)
})
afterEach(() => {
jest.clearAllTimers()
})
it('renders component as expected', () => {
const wrapper = mount(
<TestWrapper>
<PersonalGreeting />
</TestWrapper>
)
expect(wrapper.text().length > 0).toBe(true)
})
it('Checks time every minute', () => {
jest.useFakeTimers()
mount(
<TestWrapper>
<PersonalGreeting />
</TestWrapper>
)
expect(setTimeOfDay).not.toBeCalled()
// 1 minute
jest.advanceTimersByTime(60000)
expect(setTimeOfDay).toHaveBeenCalledTimes(1)
})
})
解决方案
您需要卸载组件,这将触发您的返回函数useEffect()
查看文档
像这样的东西
it('Should unmount component', () => {
const wrapper = mount(
<TestWrapper>
<PersonalGreeting />
</TestWrapper>
)
wrapper.unmount();
// continue with your expect here
})
推荐阅读
- handlebars.js - 车把模板中的自定义助手
- javascript - 如何创建名称中包含特殊字符的自定义元素?
- r - 我如何在 r 中使用 ecm 包,xtr 和 xeq 代表什么?
- r - 如何根据数据顺序对列联表进行排序?
- d3.js - 饼图未使用 D3 v5 在仪表板区域中呈现
- kotlin - 在 IDEA/Kotlin 中的代码格式化期间,如何防止在记录项目之前添加额外的空行?
- swift - SwiftUI 隐藏列表单元格(如果为空)
- java - softmax导数的实现
- java - 如何为这种情况编写正则表达式?
- node.js - 为什么我在使用 TO_DATE 但在 Oracle SQL 开发人员上工作时收到“ORA-01036:非法变量名/编号”?(使用节点)