测试时如何在我的组件之外设置 Formik isSubmitting？答案

【问题标题】：How can set Formik isSubmitting outside of my component when testing?测试时如何在我的组件之外设置 Formik isSubmitting？
【发布时间】：2020-08-11 12:07:48
【问题描述】：

我有一个带有 Formik 表单的有状态功能组件，它根据 isSubmitting 的值呈现不同的内容。

const MyPage: FunctionComponent<Props> = ({propOne, propTwo}) => {
  <Formik ...>
  ...
  {isSubmitting ? (
      <div>show this on submitting</div>
    ) : (
      <div>show this when not</div>
    )}
  </Formik>
};

如何在我的测试中设置 Formik 表单上 isSubmitting 的值？我希望能够在提交时测试页面的结构。

【问题讨论】：

添加更多代码sn-ps，这个flag是哪里来的？

标签： reactjs typescript formik react-functional-component

【解决方案1】：

通常，对于测试，您会操纵 UI 并查看结果，而不是尝试操纵组件的内部（从 UI 的角度来看，它应该被视为一个黑盒子）。这可确保您的测试是对真实用户交互的有效验证。实际上，有时有理由对规则放宽一点，这取决于您和您的用例来确定您试图从测试中获得什么价值。

所以有两种方法：

推荐 - 模拟点击提交并查看 dom 的样子。像这样的东西（取决于你的框架）

// pseudo code with enzyme
wrapper.find('button').simulate('click')

expect(wrapper.find('div').text()).toContain('show this on submitting')

不推荐 - 模拟 Formik 上下文

// pseudo code with enyzme
import { useFormikContext } from 'formik'

useFormikContext.mockReturnValue({
  ...mockedContextObject,
  isSubmitting: true,
})

expect(wrapper.find('div').text()).toContain('show this on submitting')

【讨论】：

就我而言，当我第一次提交表单时，isSubmitting 为真。但在我模拟的 API 请求解决后，isSubmitting 再次设置为 false。我需要 isSubmitting 为 true 时的状态。
这可能有几个原因，具体取决于您的测试范围、您使用的渲染方法（酶、测试库、react-dom/test-utils 等）以及如何使用你在测试。您可能需要使用act，您可能没有在正确的位置模拟返回值，因此它不会像您认为的那样返回，您的组件中可能有自动更新事物的逻辑等。很难说没有看到更多的代码，但这些是你可以看看的地方。

【解决方案2】：

在一个 formik 孩子中：

const form = useFormikContext()

form.setSubmitting(true)

【讨论】：