如何在JEST/RTL中重置组件状态，确保每次测试干净渲染？

首先明确：React Testing Library 每次调用render都会创建全新的组件实例，状态完全隔离，测试之间不会互相污染组件状态。你的第二个测试失败，根源是组件代码存在bug，以及测试代码本身的错误，而非状态未重置。

一、组件代码的关键错误修复 #

你的组件里有几个致命问题，直接导致状态逻辑异常：

1. useState 声明顺序颠倒
   原代码里的状态声明写反了：

   const [setInputValue, inputValue] = useState('')
   

   正确顺序应为状态值在前，更新函数在后：

   const [inputValue, setInputValue] = useState('')
   

   这个错误会导致你无法正确更新输入框状态。

2. 未定义的 formIsValid 变量
   在inputChangeHandler里，你调用了setFormIsValidState(formIsValid)，但formIsValid从未定义。根据需求，应该根据输入内容是否为空判断按钮禁用状态：

   const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {  
      const value = e.target.value
      setInputValue(value)
      // 输入为空时按钮禁用（formIsValidState为true），非空则启用（为false）
      setFormIsValidState(value.trim() === '')
   }
   

   同时注意：原函数接收的第二个参数i在组件调用时并未传递，直接去掉即可。

3. 补充表单提交后的清空逻辑
   第二个测试要验证表单提交后清空，需要在formatFormHandler里添加状态重置代码：

   const formatFormHandler = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      setInputValue('')
      setFormIsValidState(true)
   }
   

修复后的完整组件代码：

import { useState } from 'react';

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

   const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {  
      const value = e.target.value
      setInputValue(value)
      setFormIsValidState(value.trim() === '')
   }

   const formatFormHandler = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      setInputValue('')
      setFormIsValidState(true)
   }

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

export default FormInputConfig

二、测试代码的错误修复 #

你的第二个测试里存在变量未定义的问题：

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

这里的allInputs从未声明，应该替换为你获取的inputEl，同时补充表单提交的验证逻辑：

修复后的测试代码：

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 = () => {
   render(
      <Provider store={store}>
         <FormInputConfig />
      </Provider>
   )

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

   return { submitButton, inputEl }
}

describe('full form input', () => {
   test('submit button should be enabled when input is not empty', () => {
      const { submitButton, inputEl } = renderFormInputConfig()

      expect(submitButton).toBeDisabled()

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

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

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

      // 输入内容，验证按钮启用
      fireEvent.change(inputEl, {target: {value: 'Mock Product'}})
      expect(submitButton).not.toBeDisabled()

      // 提交表单
      fireEvent.submit(screen.getByRole('form'))

      // 验证输入框清空，按钮回到禁用状态
      expect(inputEl).toHaveValue('')
      expect(submitButton).toBeDisabled()
   })
})

三、关于测试间状态重置的补充 #

如果后续遇到真正的状态污染问题（比如使用Redux等全局状态），可以通过以下方式处理：

• 对于Redux：在beforeEach里调用store的重置逻辑，比如store.dispatch({ type: 'RESET_STATE' })
• 确保每个测试独立调用render，不复用组件实例
• React Testing Library在Jest环境下会自动执行cleanup，清除DOM残留，避免影响测试

内容的提问来源于stack exchange，提问作者Berg_Durden