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相关的文章与程序