How to use the @testing-library/react-hooks.renderHook function in @testing-library/react-hooks

To help you get started, we’ve selected a few @testing-library/react-hooks examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kentcdodds / react-testing-library-course / src / __tests__ / custom-hook-03.js View on Github external
test('allows customization of the initial count', () => {
  const {result} = renderHook(useCounter, {initialProps: {initialCount: 3}})
  expect(result.current.count).toBe(3)
})
github mlaursen / react-md / packages / menu / src / __tests__ / useVisibility.ts View on Github external
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");
  });
github avkonst / hookstate / src / __tests__ / Transform.tsx View on Github external
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);
github avkonst / hookstate / src / __tests__ / Batch.tsx View on Github external
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);
        })
    });
github avkonst / hookstate / src / __tests__ / Transform.tsx View on Github external
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);
github coinbase / rest-hooks / packages / rest-hooks / src / react-integration / __tests__ / hooks.tsx View on Github external
function testRestHook(
  callback: () => void,
  state: State,
  dispatch = (v: ActionTypes) => Promise.resolve(),
) {
  return renderHook(callback, {
    wrapper: function Wrapper({ children }) {
      return (
        
          
            {children}
          
        
      );
    },
  });
}
github vadimdemedes / draqula / test / useMutation.js View on Github external
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();
github vadimdemedes / draqula / test / useQuery.js View on Github external
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'
				},
github BoostIO / BoostNote.next / src / lib / db / specs / renameFolder.spec.ts View on Github external
function prepareDbStore() {
  const memoryStorage = new MemoryLiteStorage()
  const { result } = renderHook(
    () => createDbStoreCreator(memoryStorage, 'memory')(),
    {
      wrapper: RouterProvider
    }
  )

  return {
    result,
    memoryStorage
  }
}
github BoostIO / BoostNote.next / src / lib / db / store.spec.ts View on Github external
function prepareDbStore() {
  const memoryStorage = new MemoryLiteStorage()
  const { result } = renderHook(
    () => createDbStoreCreator(memoryStorage, 'memory')(),
    {
      wrapper: RouterProvider
    }
  )

  return {
    result,
    memoryStorage
  }
}

@testing-library/react-hooks

Simple and complete React hooks testing utilities that encourage good testing practices.

MIT
Latest version published 2 years ago

Package Health Score

85 / 100
Full package analysis