如何使用反冲为自定义钩子编写测试代码

Posted 2023-02-22

【中文标题】如何使用反冲为自定义钩子编写测试代码

【英文标题】：How to write test code for custom hook using recoil

【发布时间】：2021-04-07 01:43:03

【问题描述】：

我正在使用 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 应该在哪里？

【参考方案1】：

您可能需要将使用自定义钩子的组件包装在哪里，如下所示：

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');
)