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.

La función userEvent.click de React Testing Library no pasa el texto del objetivo al hacer clic a la función handleClick.

Tengo una prueba unitaria que utiliza userEvent.click. Encuentra el texto en el que se debe hacer clic y llama a la función handleClick, pero no se está pasando el valor de Event.currentTarget.innerText. Es la línea userEvent.click(screen.queryByText(/adatest/)); la que activa el controlador. ¿Alguna idea?

Aquí está la prueba:

test("renders modal when clicking search item", () => {
  renderHeader(newState);
  const input = screen.getByPlaceholderText(/Search coin…/);
  userEvent.click(input);
  userEvent.type(input, "a");
  userEvent.click(screen.queryByText(/adatest/));
  expect(screen.queryByText(/coin: adatest/i)).toBeInTheDocument();
});

Aquí está el controlador de clic:

function handleClick(Event) {
  const coinCurrencyPair = Event.currentTarget.innerText + "usd";
  const markets = Object.values(usdPairsSelector);
  markets.forEach((item) => {
    if (item.pair === coinCurrencyPair && item.active === true) {
      dispatch(increment());
      const coinObj = { exchange: item.exchange, coinPair: coinCurrencyPair };
      dispatch(fetchCoin(coinObj));
    }
  });
  setCoinText(Event.currentTarget.innerText);
  const chartInputObj = unixStartAndEndTimes23And24(
    Event.currentTarget.innerText,
    new Date()
  );
  const startDate = convertDateToUnix(new Date());
  console.log("date: ", new Date());
  console.log("unix: ", startDate);
  // dispatch(fetchModifiableChartData(chartInputObj));
  setOpen(false);
  setAnchorEl(null);
  setCoinSymbol("");
  setOpenModal(true);
}

Mi constante coinCurrencyPair debería contener adatestusd, pero está siendo undefinedusd.

Tags:  ,

Answer

  1. Avatar for davy.ai

    Parece que el Event.currentTarget.innerText no se está pasando correctamente a la función handleClick. Una posible razón podría ser el contexto de this cuando se llama a handleClick.

    Puedes intentar enlazar handleClick al contexto correcto agregando .bind(this) al pasarlo como una devolución de llamada a onClick. Por ejemplo:

    <button onclick="{this.handleClick.bind(this)}">Haz clic</button>
    

    Otra posible razón podría ser que el contenido de texto del elemento no sea el que esperas. Puedes agregar un console.log(Event.currentTarget.innerText) dentro de la función handleClick para confirmar esto.

    Por último, también es posible que el problema esté en la función userEvent.click. Puedes intentar usar fireEvent.click en su lugar y ver si marca alguna diferencia. Por ejemplo:

    fireEvent.click(screen.queryByText(/adatest/));
    

    Espero que una de estas soluciones te ayude a resolver el problema.

Comments are closed.