mercredi 3 juin 2020

The given element does not have a value setter cannot test onclick function React Testing Library

In my following test I want to test if the onClick works as it suppose to be. Therefore I have written a test that should check if this works. So therefore I want to use fireevent. When the user clicks on the button it should check if the function has been called.

te

import React from "react";
import { useDispatch } from "react-redux";
import axios from "axios";
import { getRandomMeal } from "../../actions/index";

export const RandomMeals = () => {
    const dispatch = useDispatch();

    const getRandomMeals = () => {
        axios.get("https://www.themealdb.com/api/json/v1/1/random.php")
        .then((res) => {
            dispatch(getRandomMeal(res.data.meals));
        }).catch((err) => {
            console.log("error");
        })
    }
    return (
        <div>
            <div className="button-background-color button-default button-random" aria-label="random-meals-button" onClick={getRandomMeals}>Get Random</div>
        </div>
    )
}

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { RandomMeals } from "./RandomMeals";
import { Provider } from "react-redux";
import { store } from "../../Store";

const setup = () => {
    const utils = render(<Provider store={store}><RandomMeals/></Provider>);
    const input = utils.getByLabelText("random-meals-button");
    return {
        input,
        ...utils
    }
}

test("It should check if input value is same as output", () => {
    const { input } = setup()
    fireEvent.change(input, { target: { value: "random-meals-button-test" } })
    expect(input.value).toBe("random-meals-button-test")
})

Aucun commentaire:

Enregistrer un commentaire