Day 15 使用renderHook

来，今天来看renderHooks这个library吧，大家可以看到昨天的写法，透过render component的方式去取得hook的value这种方式太不方便，因此今天介绍这一套

'@testing-library/react-hooks'

那接下来把昨天的code进行改写

import { renderHook, act } from '@testing-library/react-hooks';
import { useChangeName } from '@hooks/useName';

test.only('I want to test useName', () => {
	const { result } = renderHook(useChangeName);
	
	expect(result.current.name).toBe('stan');

	act(() => {
		result.current.setFullName();
	});

	expect(result.current.name).toBe('stanmaomao');
})

那接下来新增如何传parms进去hook，来我们看一下这只API的定义

function renderHook(callback: (prop?: any) => any, options?: RenderHookOptions): RenderHookResult 

在RenderHookOptions的选项，我们可以在这边找到

在这边我们可以用到initialProps，来传props进到hook

const { result } = renderHook(useChangeName, {initialProps: {
	name: 'good'
}})

那这时我们就可以改写一下

import { useState } from 'react';

type NameType = {
	name: string;
}

export const useChangeName = ({ name: initialName }: NameType) => {
  const [name, setName] = useState<string>(initialName);

  const setFullName = () => {
    setName('stanmaomao');
  };

  return { name, setFullName };
};

接下来我们测试就改写成

test.only('useName', () => {
  const { result } = renderHook(useChangeName, {
    initialProps: {
      name: 'good'
    }
  });
  expect(result.current.name).toBe('good');
  act(() => {
    result.current.setFullName();
  });
  expect(result.current.name).toBe('stanmaomao');
});

这样就完成拉！！

明天来学习测试加入Provider