it('Button should be eneabled after input and textArea got values', () => { render( <CreatePostElmnts createPost={''} setTitle={mockedFunction} setPostText={mockedFunction} /> ); const Button = screen.getByRole('button', { name: /Submit Post/i }); const inputElement = screen.getByPlaceholderText('Title..'); fireEvent.change(inputElement, { target: { value: 'Testing Text' } }); const TextAreaElement = screen.getByPlaceholderText('Post...'); fireEvent.change(TextAreaElement, { target: { value: 'Testing Text' } }); expect(Button).not.toBeDisabled(); });y el código para mi componente es el siguiente
function CreatePostElmnts({createPost, setTitle, setPostText, postText, title}) { return ( <div className="createPostPage"> <div className="cpContainer"> <h1>Create A Post</h1> <div className="inputGp"> <label>Title:</label> <input placeholder="Title.." onChange={(event) => setTitle(event.target.value)}/> </div> <div className="inputGp"> <label>Post:</label> <textarea placeholder="Post..." onChange={(event) => setPostText(event.target.value)} /> </div> <button disabled={!title || !postText} onClick={createPost}>Submit Post</button> </div> </div> ) } export default CreatePostElmntsCuando escribo cosas y hago que el título y el texto posterior obtengan valores, mi botón ya no está deshabilitado en mi página web, pero aún está fallando en mi prueba. ¿Cuál podría ser la razón?
Su componente real está haciendo más que la pieza que está mostrando.
En la página principal, creo que hay algún componente de contenedor que administra lo que sucede cuando se cambia el título o el texto posterior a través de setTitle & setPostText . Y luego el title y el postText se envían de vuelta al componente.
Sin embargo, en su prueba de unidad, se está burlando de esas dos devoluciones de llamada con mockedFunction , que simplemente se llamaría. Pero luego está tratando de probar el resultado de los eventos de cambio, que solo funcionarán si la devolución de llamada vuelve a pasar los nuevos valores al componente y se vuelve a representar.
Siento que necesita repensar el componente O cambiar la prueba unitaria de esta manera.
Caso de prueba 1: Pase cadenas no vacías y válidas para el title y el postText y verifique que el botón no esté deshabilitado.
Caso de prueba 2: no pase el título y el subtítulo/pase cadenas vacías y verifique que el botón esté deshabilitado.
Caso de prueba 3: verificar las devoluciones de llamadas. Puede afirmar que se llama a la función burlada con el valor requerido, cuando activa el evento de disparo.
Estos deberían ser suficientes para afirmar el comportamiento del componente.
En este momento, de la forma en que lo tiene, siempre se habrá disabled ON, ya que el title y el postText nunca se enviarán al componente.