Question

因此，测试应为功能提供输入并测试输出。使用React，该功能的输入可以来自props或子组件/功能。好的，还有其他方法，但现在让我们看看这两种方法。

我有一个Container组件，可以执行一些业务逻辑并呈现一个子级：

import React, { useEffect } from 'react'
import ExampleView from './ExampleView'

const ExampleContainer = ({ onSomeBusinessDone, iHaveMounted }) => {
  useEffect(() => {
    // An example of a "on mount" style effect that we may need to test
    // Grab data, do some initial logic whatever, but test that I call a prop
    // within this mount call
    iHaveMounted()
  }, [])

  const onDoSomeBussinessLogic = (eventData = {}) => {
    // Do something with the data perhaps
    eventData.whoa = true
    onSomeBusinessDone(eventData)
  }

  return <ExampleView onSomething={onDoSomeBussinessLogic} />
}

export default ExampleContainer

该容器为子级提供了回调样式prop。目的是测试当孩子调用此函数时，Container用它进行一些操作，然后调用其自己的回调样式prop（也就是我们要测试的输出）。

我遇到的问题是如何触发带有挂钩的Jest / React中提供给孩子的此功能？

这里很难用语言解释设置，但是我确实有一个repo和codeandbox： https://github.com/Kikketer/hooks-test-questions https://codesandbox.io/embed/hooks-tests-questions-vvrv6

沙盒是最适合看的东西，但我不知道如何在其中进行笑话，因此克隆后最容易尝试一下。

这里有几件事情：

我不能使用浅色渲染器，因为我还需要验证useEffect钩子也可以调用属性。
我在Container函数中使用了子组件的模拟渲染，因此它不会尝试渲染子组件，因为我只测试了Container，因此我无需担心该子组件的依赖性或其他故障。只是我要传递有用的和预期的道具。

我的测试如下：

  jest.mock('./ExampleView', () => props => <div data-id="ExampleView" {...props} />)
  ...
  ...

  test('when a child does something expect the prop function to have `whoa`', () => {
    const onSomething = jest.fn()
    act(() => {
      renderer.create(<ExampleContainer onSomething={onSomething} />)
    })
    // Somehow trigger the child's action... not sure how
    // Urm....
    expect(onSomething).toHaveBeenCalledWith({ clicked: true, whoa: true })
  })

我再次模拟视图，因为我不能使用较浅的渲染器，也不想渲染子级。我只想验证道具（快照做得很好）。

我如何使用课程

在执行钩子之前，我可以进入组件并直接调用函数：

const onSomeBusinessDone = jest.fn()
const iHaveMounted = jest.fn()
const component = new ExampleContainer({onSomeBusinessDone, iHaveMounted})
component.onDoSomeBussinessLogic({clicked: true})
// I can check to see that given the input (clicked) I get the output:
expect(onSomeBusinessDone).toHaveBeenCalledWith({clicked: true, whoa: true})

我意识到创建new react组件是不受欢迎的，但这将使我能够非常简单地运行此测试。我不相信我可以用Hooks做类似的格式，因为它是一个不公开内部函数的函数。

React Hook测试子项回调

0 个答案: