How to ensure that each test runs with a clean render using JEST/RTL?

Question

I am unit testing a component form. The idea here is that the submit button is disabled and gets enabled when the form input is not empty. I'm doing that with a controlled input.

I have two tests in this example, the first one works fine, but the second one doesn't, this happens because of the changes made by the first test, the inputValue state changes and doesn't reset for the second test.

What I want to know is how can I reset states between tests?

I've tried rendering the component within each test, tried using beforeEach, among other solutions that I found, but without any success.

This is a sample of my component:

const FormInputConfig = () => {
   const [formIsValidState, setFormIsValidState] = useState(true)
   const [setInputValue, inputValue] = useState('')


   const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {  
      const value = e.target.value
      
      setInputValue(value)
      setFormIsValidState(formIsValid)
   }

   const formatFormHandler = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      // do something
   }

   return (
      <form
         onSubmit={formatFormHandler}
      >
         <input 
            onChange={e => inputChangeHandler(e)}
            value={inputValue}
         />
         <button disabled={formIsValidState}>
            Inserir Produto
         </button>
      </form>
   )
}

export default FormInputConfig

This is the test:

import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { store, Provider } from 'test-setup'

import FormInputConfig from './FormInputConfig'

const renderFormInputConfig = () => {
   const { container } = render(
      <Provider store={store}>
         <FormInputConfig />
      </Provider>
   )

   const submitButton = screen.getByRole('button', {name: 'Inserir Produto'})

   return { container, submitButton }
}

describe('full form input', () => {
   test('submit button should be set enable if all inputs are valid', () => {
      const { submitButton } = renderFormInputConfig()
      const inputEl = screen.getByRole('textbox')

      expect(submitButton).toBeDisabled()

      fireEvent.change(inputEl, {target: {value: 'Mock Product'}})

      expect(submitButton).not.toBeDisabled()
   })

   test('form should be cleared after submission', () => {
      const { submitButton } = renderFormInputConfig()
      const inputEl = screen.getByRole('textbox')

      expect(submitButton).toBeDisabled()
      
      fireEvent.change(allInputs[0], {target: {value: 'Mock Product'}})

      expect(submitButton).not.toBeDisabled()
   })
})

Answer 1

i was facing something similar to this too but i was using vitest.

To solve this i had to do:

// Unmounts React trees that were mounted with render
afterEach(() => {
  cleanup();
});

In my test setUpFiles.ts file that runs before each tests.

Hope this helps