Javascript 如何测试使用钩子且不返回JSX的ReactJS函数

我正试图在React中了解功能测试，我遇到了一个障碍，我希望有人能解释一下。目前，我有一个小型计数器应用程序，它有一个按钮组件，接收函数和字符串作为道具。看起来是这样的：

Button.js

现在，我的App.js呈现按钮和动作代码，如下所示

App.js

我得到的结果是：

有人能给我一些指点吗？我将不胜感激

为了进一步了解我的配置，这是我在此项目中的实验性GitHub帐户

---

谢谢

当显示错误消息时，请执行react HOOK SUSSESTATE等操作。。应在react组件内部调用。但是在你的测试中，你在react组件之外调用它

测试这种情况的推荐方法是：不要直接测试定制挂钩，而是使用react组件一起测试它

例如。 app.js：

从“React”导入React； 从“/CounterHandler”导入{CounterHandler}； 功能应用程序{ 常数计数器=计数器0； 回来 点击增加 单击以减少 计数器：{counter.counter} ; } 导出默认应用程序； counterHandler.js：

从“React”导入React； export const CounterHandler=num=>{ const[counter，setCounter]=React.useStatenum； 常数增加==>setCountercounter+1； 常数减少==>setCountercounter-1； 返回{ 柜台 增长 减少 }; }; app.test.js：

从“React”导入React； 从“酶”导入{shall}； 从“./App”导入应用程序； 描述'60158977'，=>{ 让包装纸； beforeach=>{

---

wrapper=shall

谢谢你的帮助！这是我一直在寻找的。另外一个问题，只是为了确保我理解正确。因为我们不是在测试普通JS，而是在测试自己，所以我需要测试我的组件，而不仅仅是我的单个功能，对吗？我无法隔离我的处理程序，因为它可以像inte一样作为一个整体进行测试gration样式。我想知道如何测试countHandler钩子返回的对象。通过测试对象，我的意思是测试对象内返回的形状和值。

import React from 'react'
import PropTypes from 'prop-types'

export const Button = (props) => {
  const { btnTitle, btnAction } = props

  return (
    <button onClick={btnAction}>{btnTitle}</button>
  )
}

Button.propTypes = {
  btnAction: PropTypes.func,
  btnTitle: PropTypes.string
}

import React from 'react'

export const CounterHandler = num => {
  const [counter, setCounter] = React.useState(num)
  const increase = () => setCounter(counter + 1)
  const decrease = () => setCounter(counter - 1)

  return {
    counter,
    increase,
    decrease
  }
}

import React from 'react'
import CounterHandler from './components/button/helpers'
import Button from './components/button'

function App () {
  const counter = CounterHandler(0)

  return (
    <div className="App">
      <Button btnTitle="click to increase" btnAction={counter.increase} />
      <Button btnTitle="click to decrease" btnAction={counter.decrease} />
      <h1>counter: {counter.counter}</h1>
    </div>
  )
}

export default App

import { CounterHandler } from './CounterHandler'

const counter = CounterHandler(0)

describe('Counter state', () => {
  test('test initial state', () => {
    expect(counter.counter).tobe(0)
  })
})