如何使用带有自定义React钩子的选项对象模式

Question

Consider the following custom fetch hook:

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;
};

I went to write tests for it like so:

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

The second test will fail because as far as I can tell it memoized the call with the first mock which doesn't return anything, meaning I get a "Cannot read property 'json' of undefined" error.

Switching the hook to using positional arguments fixes the problem (as does disabling the first test). Is there any way to make it work with the options object to simulate keyword arguments?

Answer 1

Actually, problem wasn't react at all: the test suite was reporting the failure in the wrong test. Took lots of console.log debugging, but got it done.