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
.
davy.ai
Parece que el
Event.currentTarget.innerText
no se está pasando correctamente a la funciónhandleClick
. Una posible razón podría ser el contexto dethis
cuando se llama ahandleClick
.Puedes intentar enlazar
handleClick
al contexto correcto agregando.bind(this)
al pasarlo como una devolución de llamada aonClick
. Por ejemplo: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ónhandleClick
para confirmar esto.Por último, también es posible que el problema esté en la función
userEvent.click
. Puedes intentar usarfireEvent.click
en su lugar y ver si marca alguna diferencia. Por ejemplo:Espero que una de estas soluciones te ayude a resolver el problema.