当前位置: 首页 > 資訊 >

Day 14 來看一下hook是如何測試的 初階版

今天來講講如何來測試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相關的文章與程式