Re-render components under test

[NoriSte]

The discussion started on Twitter.

I was wondering about how to re-render components under tests. Currently, Cypress allows doing that through a mini-app, see this example coming directly from the react package.

const MyInput = ({ inputVal, onInputChanged }) => {
  return (
    <>
      <input type="text" value={inputVal} onChange={(e) => onInputChanged(e.target.value)} />
      <p>You entered {inputVal} </p>
    </>
  )
}

describe('My Input', () => {
  it('updates when props change', () => {
    const App = () => {
      const [message, setMessage] = React.useState('')

      return (
        <MyInput
          inputVal={message}
          onInputChanged={(newValue) => { setMessage(newValue) }}
        />
      )
    }

    mount(<App />)

    /* Update props */
    cy.get('input').type('hello there!')
    cy.contains('You entered hello there!')
  })
})

In the above test, we're testing the MyInput but, in order to do so, we need to wrap it with the App component.

My original question was: why are Cypress's component test APIs forcing the developer to write a stateful mini-app to do so? Would be possible to have a rerender-like API like the one exposed by React Testing Library?

In the Twitter thread, @JessicaSachs pointed to the rationale behind this decision and I got it! My original question comes from the fact that we have a mountHook API that allows the developer to consume the hook "outside" a real component-like environment (Ideally I should create and mount a component in order to test a hook).

I think we can live without a rerender-like API but I'm glad to discuss the topic 😊

Thanks everyone

p.s. let me know if you prefer to move the discussion to an issue

[lmiller1990]

Hey. Sorry for the slow reply.

We now have a rerender API, it works the same as testing library. You can see an example here. mount is a thenable from which you can destructure a mount function.

Here's a snippet:

const Component = ({ input }) => {
    useLayoutEffect(() => {
      return layoutEffectCleanup
    }, [input])

    useEffect(() => {
      return effectCleanup
    }, [])

    return <div>{input}</div>
  }

  mount(<Component input="0" />).then(({ rerender }) => {
    expect(layoutEffectCleanup).to.have.been.callCount(0)
    expect(effectCleanup).to.have.been.callCount(0)

    rerender(<Component input="0" />).then(() => {
      expect(layoutEffectCleanup).to.have.been.callCount(0)
      expect(effectCleanup).to.have.been.callCount(0)
    })

    rerender(<Component input="1" />).then(() => {
      expect(layoutEffectCleanup).to.have.been.callCount(1)
      expect(effectCleanup).to.have.been.callCount(0)
    })
  })
})