Reactjs 使用useState（）钩子测试功能组件时设置状态

当我用酶测试类组件时，我可以通过

wrapper.setState（{}）

来设置状态。现在，当我使用

useState（）

hook测试函数组件时，我该怎么做呢

例如，在我的组件中，我有：

const [mode, setMode] = useState("my value");

---

我想在我的测试中更改

模式

当使用钩子中的状态时，您的测试必须忽略诸如状态之类的实现细节，以便正确地测试它。 您仍然可以确保组件将正确的状态传递给其子组件

你可以在肯特·C·多德的著作中找到一个很好的例子

下面是一个代码示例的摘录

依赖于州实施细节的测试-

test('setOpenIndex sets the open index state properly', () => {
  const wrapper = mount(<Accordion items={[]} />)
  expect(wrapper.state('openIndex')).toBe(0)
  wrapper.instance().setOpenIndex(1)
  expect(wrapper.state('openIndex')).toBe(1)
})

test（'setOpenIndex正确设置打开索引状态'，（）=>{
const wrapper=mount（）
expect（wrapper.state（'openIndex'））.toBe（0）
wrapper.instance（）.setOpenIndex（1）
expect（wrapper.state（'openIndex'））.toBe（1）
})

不依赖于状态实现细节的测试-

test('counter increments the count', () => {
  const {container} = render(<Counter />)
  const button = container.firstChild
  expect(button.textContent).toBe('0')
  fireEvent.click(button)
  expect(button.textContent).toBe('1')
})

test（'计数器增加计数'，（）=>{
const{container}=render（）
const button=container.firstChild
expect（button.textContent）.toBe（'0'）
fireEvent.单击（按钮）
expect（button.textContent）.toBe（'1'）
})

这是我发现的方法，我不是说这是对的还是错的。在我的例子中，一个代码块依赖于设置为特定值的状态。我将保留我对测试的意见，以回应我自己

在测试文件中： 调整react库的导入

import * as React from 'react'

然后在测试中监视useState并模拟其实现

const stateSetter = jest.fn()
jest
.spyOn(React, 'useState')
//Simulate that mode state value was set to 'new mode value'
.mockImplementation(stateValue => [stateValue='new mode value', stateSetter])

---

请注意，模拟useState这种方式将适用于为您的测试调用useState的所有实例，因此，如果您有多个正在查看的状态值，它们都将设置为“新模式值”。其他人可能会帮你解决这个问题。希望有帮助。

哦。。所以我们现在还不能直接使用hooksNot来测试状态。我很难想象这是怎么可能的，因为钩子的语法依赖于调用顺序而不是命名。我把它看作是测试类，没有访问私密的权限——有访问权限很好，但通常意味着你可以写得更好：）嗯，我想测试实际上不应该依赖于状态改变，而是应该测试外观，所以我可以说著名的肯特·C·多德（Kent C.Dodds）真的错了。这就是当大量依赖于只会推特的程序员的话时会发生的情况。我在IBM工作，我们有义务测试挂钩。显然，我们必须测试钩子的功能，我们不能忽视钩子的存在和关键。我遵循了这篇文章的一些指导，我也将很快在这里发布和回答，让你们知道如何真正测试钩子，这并不像Kent说的那样。他只是错了。第二个测试和E2E测试一样好，它不是一个单元测试，消费者是开发者而不是浏览器。那么有2个useState的案例呢？在有2个或更多useState的案例中，我们使用了MockImplementation一次，取得了一些成功，但我要警告你，这并不完美。