今天來講講如何來測試hook的原始版本

來，我們來先做一個超簡單的hook就叫useName吧

import { useState } from 'react';

export const useChangeName = () => {
  const [name, setName] = useState<string>('stan');

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

  return { name, setFullName };
};

看吧 很簡單，就是export 一個name跟一個set的function，這時候我們測試的原始碼怎樣寫呢！！！

這部分我就簡單講解一下，我們寫一個test case，然後建立變數，來取得之後更新得值，我們寫一個Component的function來render，因為hook只能在functional component，所以用一個外層的變數result來取得hook回傳的值，其中act的函數是非同步的互動更新，因此setState的部分要包在act裡面來達到非同步的更新．

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

test.only('useName', () => {
  let result: any = {};
  function Component() {
    result = useChangeName();
    return null;
  }
  render(<Component />);
  expect(result.name).toBe('stan');
  act(() => {
    result.setFullName();
  });
  expect(result.name).toBe('stanmaomao');
});

明天會來講進階版renderHook的功能．

ref: kentc相關的文章與程式