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.
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