cra react18 ts 自定义hooks 单元测试

首先创建 cra 项目
如果报错说最新的 create-react-app 版本是 5.x ,而你的是 4.x 的话
需要先卸载，再重新安装
sudo npm uninstall -g create-react-app
sudo npm install -g create-react-app

这个时候再看下版本应该就是 ok的

create-react-app --version
5.0.1

然后创建项目

npx create-react-app hooks-test --template typescript

添加依赖

yarn add -D @testing-library/react-hooks

创建自定义 hooks useCounter.ts

import {useState, useCallback} from 'react'

export const useCounter = () => {
  const [count, setCount] = useState(0)

  const increment = useCallback(() => setCount(x => x + 1), [])
  const decrement = useCallback(() => setCount(x => x - 1), [])

  return {count, increment, decrement}
};

创建测试文件 userCounter.spec.ts

import {act} from '@testing-library/react-hooks'
import {renderHook} from '@testing-library/react'


import {useCounter} from "./useCounter";

test('should increment counter', () => {
  const {result} = renderHook(() => useCounter())
  act(() => {
    result.current.increment()
  })
  expect(result.current.count).toBe(1)
})

在webstorm 上面执行