(Apolloclientv3)useLazyQuery自定義鉤子測驗

我正在為我的自定義 useLazyQuery 鉤子的測驗問題而苦苦掙扎。我的第一個測驗通過了，但第二個測驗失敗了。第二次測驗做錯了什么？

這是 useLazyFetchCoin.tsx

export const useLazyFetchCoin = () => {
  const [coins, setCoins] = useState<ICoin[]>([]);

  useEffect(() => {
    const coins = localStorage.getItem('coinsInfo');
    if (coins) {
      setCoins(JSON.parse(coins));
    }
  }, []);

  const [getData, { loading, error }] = useLazyQuery(GET_COIN_PRICE_QUERY, {
    fetchPolicy: 'network-only',
    notifyOnNetworkStatusChange: true,
    onCompleted: (data) => {
      const hasSameCoin = coins.some((f) => f.id === data.markets[0]?.id);
      if (data.markets.length && !hasSameCoin) {
        const allCoins = [...coins, data.markets[0]];
        setCoins(allCoins);
        localStorage.setItem('coinsInfo', JSON.stringify(allCoins));
      } else if (data.markets.length <= 0) {
        alertNotification('Coin not found !', Notification.ERROR);
      }
      if (hasSameCoin) {
        alertNotification('This coin already exists on your list !', Notification.WARNING);
      }
    }
  });

  return { coins, setCoins, getData, loading, error };
};

這是測驗檔案

describe('useLazyFetchCoin custom hook', () => {
  const QueryMock = [
    {
      request: {
        query: GET_COIN_PRICE_QUERY,
        variables: { code: 'BNB' }
      },
      result: {
        data: {
          markets: [
            {
              id: 'binance_bnb_eur',
              baseSymbol: 'BNB',
              ticker: {
                lastPrice: '414.90000000'
              }
            }
          ]
        }
      }
    }
  ];

  const QueryWrongCodeMock = [
    {
      request: {
        query: GET_COIN_PRICE_QUERY,
        variables: { code: 'asd' }
      },
      result: {
        data: {
          markets: []
        }
      }
    }
  ];

  function getHookWrapper(mocks: any, code: string) {
    const wrapper = ({ children }: any) => (
      <MockedProvider mocks={mocks} addTypename={false}>
        {children}
      </MockedProvider>
    );
    const { result, waitForNextUpdate } = renderHook(() => useLazyFetchCoin(), {
      wrapper
    });

    expect(typeof result.current.coins).toBe('object');
    expect(result.current.loading).toBeFalsy();
    expect(result.current.error).toBeUndefined();

    // call the lazy function
    act(() => {
      result.current.getData({
        variables: { code }
      });
    });

    return { result, waitForNextUpdate };
  }

  it('should return an array of coins', async () => {
    // Working correctly
    const { result, waitForNextUpdate } = getHookWrapper(QueryMock, 'BNB');

    await waitForNextUpdate();

    expect(result.current.loading).toBeFalsy();
    expect(result.current.coins[0]).toEqual({
      id: 'binance_bnb_eur',
      baseSymbol: 'BNB',
      ticker: {
        lastPrice: '414.90000000'
      }
    });
  });

  it('should return an empty array when requesting a wrong code', async () => {
    // Not working
    const { result, waitForNextUpdate } = getHookWrapper(QueryWrongCodeMock, 'asd');

    await waitForNextUpdate();

    expect(result.current.loading).toBeFalsy();
    expect(result.current.coins[0]).toEqual([]);
  });
});

我在第二次測驗中收到此錯誤訊息。

Expected: []
Received: {"baseSymbol": "BNB", "id": "binance_bnb_eur", "ticker": {"lastPrice": "414.90000000"}}

我不明白，因為我為每個測驗使用不同的查詢。

此外，當您傳遞錯誤代碼（例如“asd”）時，第二個測驗應該收到一個空陣列。

怎樣才能為它寫一個合適的測驗呢？

uj5u.com熱心網友回復：

我解決了這個問題。當我更改訂單測驗時，它作業正常。

我為它添加了一個清晰的模擬函式。

清晰的模擬

標籤：单元测试 反应钩子 开玩笑的 阿波罗客户端 反应测试库

上一篇：包名不匹配

下一篇：如何對Flux輸出進行與順序無關的斷言？