I created a test function ProductList.test.js :
it('We expect 24 products in the list when queryString === ""', async () => {
const mockGet = jest.spyOn(axios, 'get');
mockGet.mockImplementation(() => {
return Promise.resolve({
data: {
products: Array(24).fill(1).map((x, index) => ({
id: index,
name: `product_${index}`
}))
}
});
});
const productList = await ProductList();
expect(productList).toEqual('24');
});
});
To test this component:
function ProductList({products, setProducts, pageNumber, setPageNumber}) {
const [searchTerm, setSearchTerm] = useState("");
const [query, setQuery] = useState("");
const productsPerPage = 8
const pagesVisited = pageNumber * productsPerPage
useEffect(() => {
axios
.get(
`https://world.openfoodfacts.org/cgi/search.pl?search_terms=${query}&search_simple=1&action=process&fields=id%2Cproduct_name%2Cimage_front_small_url&json=1&page=${pageNumber}&page_size=${productsPerPage}`
)
.then((response) => {
setProducts(response.data.products);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [query]);
return (
.......)
export default ProductList;
Test is not working and returns this error:
[Test number of products in the list › We expect 24 products in the list when queryString === ""
TypeError: Cannot destructure property 'products' of 'undefined' as it is undefined.
9 |
10 |
> 11 | function ProductList({products, setProducts, pageNumber, setPageNumber}) {
| ^
12 | const [searchTerm, setSearchTerm] = useState("");
13 | const [query, setQuery] = useState("");
14 |
at ProductList (src/components/ProductList.jsx:11:23)
at Object.<anonymous> (src/components/ProductList.test.js:29:35)]
Props comes from this component :
function Home() {
const [products, setProducts] = useState([]);
const [pageNumber, setPageNumber] = useState(0)
return (
<div className="home-component">
<ProductList products={products} setProducts={setProducts} pageNumber={pageNumber} setPageNumber={setPageNumber}/>
<Pagination setPageNumber={setPageNumber} products={products}/>
</div>
);
}
export default Home;
I don't know why it is undefined, everything works well when I npm start. Can you please explain me what is the problem? Thanks a lot