Question

考虑以下自定义抓取钩子：

import { useEffect, useState } from 'react';

const useFetch = ({
  url,
  request,
  initialData = {},
  fetch = window.fetch.bind(window),
}) => {
  const [data, update] = useState(initialData);
  const fetchData = async () => {
    const resp = await fetch(request || url);
    const json = await resp.json();
    update(json);
  };

  fetchData();
  return data;
};

我像这样去写测试：

const TestHook = ({ hook, args }) => {
  const res = hook(...args);
  return <div result={res} />;
};

let fakeFetch;
beforeEach(() => {
  fakeFetch = jest.fn();
});

describe('fakeFetch', () => {
  it('should use initialData when present', () => {
    const args = [{
      url: 'http://foo.com',
      initialData: 3,
      fetch: fakeFetch,
    }];

    const wrapper = mount(<TestHook hook={useFetch} args={args} />);
    const { result } = wrapper.find('div').props();
    expect(result).toBe(3);
  });

  it('should update with new data from the fetch', done => {
    fakeFetch.mockReturnValueOnce(fakeResponseFactory('foo'));
    const args = [{
      url: 'http://foo.com',
      intialData: 'baz',
      fetch: fakeFetch,
   } ];

    const wrapper = mount(<TestHook hook={useFetch} args={args} act={act}/>);
    const { result } = wrapper.find('div').props();
    expect(result).toEqual('baz');
    setTimeout(() => {
      act(() => wrapper.update());
      const { result } = wrapper.find('div').props();
      expect(result).toEqual('foo');
      done();
    }, 10);
  });
});

第二项测试将失败，因为据我所知，它使用第一个模拟程序记忆了调用，该模拟程序不返回任何内容，这意味着我收到“无法读取未定义的'json'属性'”错误。

将钩子切换为使用位置参数可解决此问题（与禁用第一个测试一样）。有什么方法可以使其与options对象一起使用以模拟关键字参数？

Answer 1

实际上，问题根本没有解决：测试套件报告错误的测试失败。进行了许多console.log调试，但已完成。

如何通过自定义反应挂钩使用选项对象模式

1 个答案: