如何解决如何使用反冲为自定义钩子编写测试代码
我正在使用 Jest 为我的 Web 应用程序中的自定义钩子编写测试代码。
它使用 Recoil 进行状态管理,但是当我运行 npm run test
时出现错误消息。
这是错误信息。
This component must be used inside a <RecoilRoot> component.
16 | const useIds = () => {
17 | // const [ids,setIds] = React.useState([]);
> 18 | const [ids,setIds] = useRecoilState(idsstate);
| ^
这是测试代码。
import * as React from 'react';
import { render,fireEvent } from '@testing-library/react';
import { useIds } from '@/hooks/useIds';
import { RecoilRoot } from 'recoil';
it('unit test for custom hook useIds',() => {
const TestComponent: React.FC = () => {
const ids = useIds();
return (
<RecoilRoot>
<div title='ids'>{ ids }</div>
</RecoilRoot>
)
}
const { getByTitle } = render(<TestComponent />);
const ids = getByTitle('ids');
})
import * as React from 'react';
import { useRouter } from 'next/router';
import { atom,useRecoilState } from 'recoil';
import { fetchIdsByType } from '@/repositories';
const initialState: {
[type: string]: number[];
} = {};
export const idsstate = atom({
key: 'idsstate',default: initialState,});
const useIds = () => {
const [ids,setIds] = useRecoilState(idsstate);
const router = useRouter();
const { type } = router.query;
React.useEffect(() => {
if (router.asPath !== router.route) {
// @ts-ignore
fetchIdsByType(type).then((ids: number[]) => {
setIds((prevstate) => {
return {
...prevstate,// @ts-ignore
[type]: ids,};
});
});
}
},[router]);
// @ts-ignore
return ids[type];
};
export { useIds };
我知道为什么会发生错误,但我不知道 RecoilRoot
应该在哪里?
解决方法
您可能需要如下放置使用自定义钩子的组件的包装位置:
it('unit test for custom hook useIds',() => {
const TestComponent: React.FC = () => {
const ids = useIds();
return (
<div title='ids'>{ ids }</div>
)
}
const { getByTitle } = render(
// Put it here to wrap your custom hook
<RecoilRoot>
<TestComponent />
</RecoilRoot>
);
const ids = getByTitle('ids');
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。