How to use @testing-library/react-hooks - 10 common examples

function checkTypesForCleanup() {
    cleanup(); // $ExpectType Promise
}

test('allows customization of the initial count', () => {
  const {result} = renderHook(useCounter, {initialProps: {initialCount: 3}})
  expect(result.current.count).toBe(3)
})

it("should default to the correct state", () => {
    let { result } = renderHook(() => useVisibility());
    let { visible, defaultFocus } = result.current;
    expect(visible).toBe(false);
    expect(defaultFocus).toBe("first");

    ({ result } = renderHook(() =>
      useVisibility({ defaultVisible: true, defaultFocus: "last" })
    ));
    ({ visible, defaultFocus } = result.current);
    expect(visible).toBe(true);
    expect(defaultFocus).toBe("last");
  });

test('object: should not rerender used after unmount', async () => {
    let parentRenderTimes = 0
    let childRenderTimes = 0
    const parent = renderHook(() => {
        parentRenderTimes += 1;
        return useStateLink({
            fieldUsedByParent: 0,
            fieldUsedByChild: 100,
            fieldUsedByBoth: 200,
            fieldUsedByChildCompensate: 0
        })
    });
    const child = renderHook(() => {
        childRenderTimes += 1;
        return useStateLink(parent.result.current, StateMemo(
            l => l.value.fieldUsedByBoth + l.value.fieldUsedByChild + l.value.fieldUsedByChildCompensate))
    });
    expect(parent.result.current.nested.fieldUsedByParent.get()).toStrictEqual(0);
    expect(parent.result.current.nested.fieldUsedByBoth.get()).toStrictEqual(200);
    expect(child.result.current).toStrictEqual(300);
    expect(parentRenderTimes).toStrictEqual(1);
    expect(childRenderTimes).toStrictEqual(1);

    act(() => {
        parent.result.current.nested.fieldUsedByChild.set(p => p + 1);
    });
    expect(parent.result.current.nested.fieldUsedByParent.get()).toStrictEqual(0);
    expect(parent.result.current.nested.fieldUsedByBoth.get()).toStrictEqual(200);
    expect(child.result.current).toStrictEqual(301);

test('object: should rerender used via scoped batched updates', async () => {
    let parentRenderTimes = 0
    let childRenderTimes = 0
    const parent = renderHook(() => {
        parentRenderTimes += 1;
        return useStateLink({
            fieldUsedByParent: 0,
            fieldUsedByChild: 100,
            fieldUsedByBoth: 200
        })
    });
    const child = renderHook(() => {
        childRenderTimes += 1;
        return useStateLink(parent.result.current)
    });
    expect(parent.result.current.nested.fieldUsedByParent.get()).toStrictEqual(0);
    expect(parent.result.current.nested.fieldUsedByBoth.get()).toStrictEqual(200);
    expect(child.result.current.nested.fieldUsedByChild.get()).toStrictEqual(100);
    expect(child.result.current.nested.fieldUsedByBoth.get()).toStrictEqual(200);
    expect(parentRenderTimes).toStrictEqual(1);
    expect(childRenderTimes).toStrictEqual(1);

    act(() => {
        child.result.current.batch(() => {
            child.result.current.nested.fieldUsedByChild.set(p => p + 1);
            child.result.current.nested.fieldUsedByChild.set(p => p + 1);
        })
    });

test('object: should rerender used via statememo', async () => {
    let parentRenderTimes = 0
    let childRenderTimes = 0
    const parent = renderHook(() => {
        parentRenderTimes += 1;
        return useStateLink({
            fieldUsedByParent: 0,
            fieldUsedByChild: 100,
            fieldUsedByBoth: 200,
            fieldUsedByChildCompensate: 0
        })
    });
    const child = renderHook(() => {
        childRenderTimes += 1;
        return useStateLink(parent.result.current, StateMemo(
            l => l.value.fieldUsedByBoth + l.value.fieldUsedByChild + l.value.fieldUsedByChildCompensate))
    });
    expect(parent.result.current.nested.fieldUsedByParent.get()).toStrictEqual(0);
    expect(parent.result.current.nested.fieldUsedByBoth.get()).toStrictEqual(200);
    expect(child.result.current).toStrictEqual(300);

function testRestHook(
  callback: () => void,
  state: State,
  dispatch = (v: ActionTypes) => Promise.resolve(),
) {
  return renderHook(callback, {
    wrapper: function Wrapper({ children }) {
      return (
        
          
            {children}
          
        
      );
    },
  });
}

title: 'B'
			}
		})
		.reply(200, {
			data: {
				createTodo: {
					id: 'b',
					title: 'B',
					__typename: 'Todo'
				},
				__typename: 'RootMutation'
			}
		});

	const wrapper = createWrapper(client);
	const mutation = renderHook(() => useMutation(CREATE_TODO_MUTATION), {wrapper});

	assertMutation(t, mutation.result, {
		data: undefined,
		isLoading: false,
		error: undefined
	});

	const firstTodosQuery = renderHook(() => useQuery(TODOS_QUERY), {wrapper});

	assertQuery(t, firstTodosQuery.result, {
		data: undefined,
		isLoading: true,
		error: undefined
	});

	await firstTodosQuery.waitForNextUpdate();

id: 'a',
						title: 'A'
					},
					{
						id: 'b',
						title: 'B'
					},
					{
						id: 'c',
						title: 'C'
					}
				]
			}
		});

	const firstRender = renderHook(() => useQuery(TODOS_QUERY), {wrapper: createWrapper(client)});

	assertQuery(t, firstRender.result, {
		data: undefined,
		isLoading: true,
		error: undefined
	});

	await firstRender.waitForNextUpdate();

	assertQuery(t, firstRender.result, {
		data: {
			todos: [
				{
					id: 'a',
					title: 'A'
				},

function checkTypesWithVoidResult() {
    act(() => {});
}