#reactjs #testing #jestjs #jest-mock-axios
Вопрос:
У меня есть компонент React, который отправляет запрос на мой api в recipes/search
конечную точку.
const recipeSearch = ({ setRecipes }) => {
const [flavorType, setFlavorType] = useState({
flavor_type: 'Sour',
});
const { flavor_type } = flavorType;
const [loading, setLoading] = useState(false);
const onChange = (e) => setFlavorType({ ...flavorType, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
const config = {
headers: {
'Content-Type': 'application/json',
},
};
setLoading(true);
axios
.post(
`${process.env.REACT_APP_API_URL}/recipes/search/`,
{
flavor_type,
},
config
)
.then((res) => {
setLoading(false);
setRecipes(res.data);
window.scrollTo(0, 0);
})
.catch(() => {
setLoading(false);
window.scrollTo(0, 0);
});
};
return (
<div data-testid='RecipeSearch'>
<form onSubmit={(e) => onSubmit(e)}>
<div>
<div>
<div>
<label htmlFor='flavor_type'>Choose Flavor</label>
<select name='flavor_type' onChange={(e) => onChange(e)} value={flavor_type}>
<option value='Sour'>Sour</option>
<option>Sweet</option>
<option>Salty</option>
</select>
</div>
<div>
{loading ? (
<div>
<Loader type='Oval' color='#424242' height={50} width={50} />
</div>
) : (
<button type='submit'>Search</button>
)}
</div>
</div>
</div>
</form>
<div>{testing}</div>
</div>
);
};
recipeSearch.propTypes = {
setRecipes: PropTypes.func.isRequired,
};
export default recipeSearch;
Когда форма отправлена onSubmit
, вызывается функция, которая, в свою очередь, отправляет запрос в мой серверный api
axios
.post(
`${process.env.REACT_APP_API_URL}/recipes/search/`,
{
flavor_type,
},
config
)
Я хочу проверить, действительно ли запрос отправлен по правильному URL-адресу.
Я использую библиотеку тестирования React и хотел бы знать, как правильно это сделать с помощью jest-mock-axios
библиотеки