es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo simular los elementos de react-hook-form al realizar pruebas con react-testing-library?

Cómo simular los elementos de react-hook-form al realizar pruebas con react-testing-library?

26 Jul, 2023 Programación

Tener un componente básico que utiliza react-hook-form:

const { handleSubmit, reset, control } = useForm({
    resolver: yupResolver(schema)
});

…

<mycomponent title='title' open="{isOpened}" control="{control}"></mycomponent>

Este componente tiene 3 props, title: una cadena de texto, open: una función, control: no tengo idea de qué es, todos ellos obligatorios.

Entonces, al escribir una prueba para esto, me quedé atascado aquí:

import { render } from '@testing-library/react';

import '@testing-library/jest-dom';
import MyComponent from './my-component';

describe('MyComponent', () => {
    const title = 'title';
    it('should render successfully', () => {
        const { baseElement, getByText } = render(
            <taskmodal title="{title}" open="{jest.fn()}" control="{}" ¿qué="" debería="" escribir="" aquí?=""></taskmodal>
        );
        expect(baseElement).toBeTruthy();
        expect(getByText(title)).toBeTruthy();
    });
});

¿Cómo se puede simular/mockear control para esta prueba?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como control es un objeto que se pasa al componente, puedes crear un objeto falso para él utilizando jest.fn() o jest.mock().

    Una manera de simular control es crear un objeto con las propiedades requeridas y pasarlo como una propiedad al componente:

    const { handleSubmit, reset, control } = useForm({
  resolver: yupResolver(schema)
});

const mockedControl = {
  ...control,
  setValue: jest.fn(),
  watch: jest.fn(),
  formState: {
    errors: {},
    isDirty: false,
    isValid: true
  }
};

...

it('debería renderizarse correctamente', () => {
  const { baseElement, getByText } = render(
    <mycomponent title="{title}" open="{jest.fn()}" control="{mockedControl}"></mycomponent>
  );
  expect(baseElement).toBeTruthy();
  expect(getByText(title)).toBeTruthy();
});

    Aquí, setValue y watch son dos métodos del objeto control que se utilizan comúnmente en los componentes de formulario. El objeto formState también se agrega para proporcionar algunos valores predeterminados para las propiedades del estado del formulario. Puedes ajustar estos valores según sea necesario para tu componente.

Comments are closed.