Jest.spyon test failed because my props from hooks are undefined

Viewed 21

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

0 Answers
Related