小编Dyl*_*211的帖子

我正在尝试测试一个组件，该组件在其内部状态从 false 变为 true 时呈现两个不同的子组件：当它为 false 时，它​​呈现一个按钮，如果按下该按钮，则将状态从 false 更改为 true 并呈现另一个。另一种是在提交时执行相反操作的表单。

我试图监视 useState 钩子以测试它是否被实际调用。但是通过模拟模块，当我在测试的第二部分需要它来测试之后呈现的表单时，实际的 setState 将不起作用。

这是我的组件：

import React, { useState } from 'react';

const MyComponent = ({handleChange, handleInput}) => {
     const [state, setState] = useState(false);

     return (
       <div>
         {!state
           ? (
             <button
               data-test="button1"
               type="button"
               onClick={() => setState(true)}
             >
               RenderForm
             </button>
           )
           : (
             <form onSubmit={() => setState(false)}>
               <input type="text" onChange={e => handleChange(e)} />
               <button type="submit">
                 Submit Form
               </button>
               <button type="button" onClick={() => setState(false)}>
                 Go Back
               </button>
             </form>
           )
         } …