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 /
  • La librería de pruebas de React está arrojando un error de prueba que indica que `NaN` es un valor inválido para la propiedad de estilo css `left`.

La librería de pruebas de React está arrojando un error de prueba que indica que `NaN` es un valor inválido para la propiedad de estilo css `left`.

11 Jun, 2023 Programación

Estoy usando un componente de biblioteca interna que utiliza React popper. El componente es un menú desplegable que debería abrirse cuando hago clic en un elemento marcado, como cualquier otro menú desplegable.

Estoy tratando de hacer una prueba con el flujo React testing library donde el usuario abre el menú desplegable y hace alguna interacción. Pero cuando hago que mi prueba abra ese menú desplegable, se produce este error (advertencia):

Advertencia: NaN es un valor no válido para la propiedad de estilo CSS izquierda.
en div
en Popover__MenuArrow (/my-project/node_modules/styled-components/src/models/Keyframes.js:20:51)
en WithTheme(Component) (/my-project/node_modules/styled-components/src/models/ServerStyleSheet.js:66:13)
en div
en Popover__DropdownContainer (/my-project/node_modules/styled-components/src/models/Keyframes.js:20:51)
en WithTheme(Component) (/my-project/node_modules/styled-components/src/models/ServerStyleSheet.js:66:13)
…

Esto no es un error de bloqueo, es una advertencia, y la prueba realmente pasa, pero es molesto verlo todo el tiempo cuando ejecuto mis pruebas.

Mi pregunta es, ¿cómo puedo hacer que este texto de advertencia no se muestre cuando ejecuto mis pruebas?

Este es el código de la prueba:

it('Should open dropdown menu', () => {
  const { getByTestId } = render(<dropdownmenu></dropdownmenu>);

  // Hacer clic en el menú desplegable y abrirlo
  const dropdownButton = getByTestId('my-dropdown-menu');
  fireEvent.click(dropdownButton);

  // Asegurarse de que la lista desplegable sea visible
  const dropdownList = getByTestId('my-dropdown-list');
  expect(dropdownList).toBeTruthy();
});
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para suprimir el mensaje de advertencia en la salida de prueba, puedes usar el método console.warn para espiar en la consola y prevenir que se registre cualquier salida. Aquí hay una versión actualizada del código de prueba que hace esto:

    it('Should open dropdown menu', () => {
  // Prevenir que el mensaje de advertencia se registre en la consola
  const originalWarn = console.warn;
  console.warn = jest.fn();

  const { getByTestId } = render(<dropdownmenu></dropdownmenu>);

  // Hacer clic en el menú desplegable y abrirlo
  const dropdownButton = getByTestId('my-dropdown-menu');
  fireEvent.click(dropdownButton);

  // Verificar si la lista desplegable es visible
  const dropdownList = getByTestId('my-dropdown-list');
  expect(dropdownList).toBeTruthy();

  // Restablecer el método original de console.warn
  console.warn = originalWarn;
});

    Este código guarda el método console.warn original en una variable, lo reemplaza con una función de simulación de Jest, ejecuta el código de prueba, hace las afirmaciones necesarias y luego restaura el método original. De esta manera, se suprimen cualquier advertencia que se hubiera impreso en la consola.

Comments are closed.