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

Question

I have stateful functional component with a Formik form that renders different content based on the value of isSubmitting.

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

How can I set the value of isSubmitting on the Formik form from my tests? I want to be able to test the structure of the page while it's submitting.

Answer 1

Inside a formik child:

const form = useFormikContext()

form.setSubmitting(true)

Answer 2

Typically for testing, you'd manipulate the UI and see the result instead of trying to manipulate the internals of the component (which should be considered a black box from the UI's perspective). This ensures that your tests are valid verifications of real user interactions. In reality, there are sometimes reasons to be a little looser with the rules and it's up to you and your use case to determine what value you're trying to derive from the tests.

So there are two approaches:

1. Recommended - Simulate clicking the submit and see what the dom looks like. Something like this (depending on your framework)

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

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

2. Not recommended - Mock the Formik context

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

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

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