-1

I'm using React context and I have a React context file that performs a fetch on a JSON file (replicating an API fetch) and returns a bunch of products, I use the products data on a few different pages in my website and is working fine:

// context/index.js

  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("../../products.json");
      const { ProductCollection } = await res.json();
      setProducts(ProductCollection);
      setLoading(false);
    };

    fetchData();
  }, [setProducts, setLoading]);

I have a separate component, I import the the products data from context/index.js to my home page component and render it which works fine:

// Home/index.js

function Home() {
  const appContext = useContext(ComputerContext);
  const { products } = appContext; // products is an array of objects
//... do stuff and render products

I'm trying to test this using Jest:

// Home/Home.test.js

import React from "react";
import { render } from "@testing-library/react";
import Home from "../Home";

it("renders without crashing", () => {
  render(<Home />);
});

But I get the error below. Obviously I need the product data in my Home.test.js file.

What's the best way to achieve this?

TypeError: Cannot destructure property 'products' of 'appContext' as it is undefined.

   7 |   const [categories, setCategories] = useState([]);
   8 |   const appContext = useContext(ComputerContext);
>  9 |   const { products } = appContext;
     |           ^
  10 |   console.log(products);
  11 |
  12 |   useEffect(() => {
1
  • You provide the context in the test, render(<ComputerContext.Provider value={stuff}><Home /></ComputerContext.Provider>).
    – jonrsharpe
    May 22 at 7:35

1 Answer 1

-1

You need to wrap your component in the context provider.

Home/Home.test.js

import React from "react";
import { render } from "@testing-library/react";
import Home from "../Home";


it("renders without crashing", () => {

    const products = {name: 'something'}; // write a mock value with schema of the context here.

  render(
    <ComputerContext.Provider value={products}>
       <Home />
    </ComputerContext.Provider>
);
});

thanks to jonrsharpe

7
  • That has absolutely no connection to the code under test.
    – jonrsharpe
    May 22 at 7:35
  • what do you mean by that? we have the context inside the Home, so we need to mock the value of it! @jonrsharpe
    – Ako
    May 22 at 8:09
  • products, in your test, is not connected at all to the Home component. It's just a local variable. Also spying on one of its properties to return itself doesn't make much sense.
    – jonrsharpe
    May 22 at 8:17
  • you dont need to pass anything to component, whenever the runner find something called appContext and product, spyOn will interfere and mock the values
    – Ako
    May 22 at 8:26
  • That's not true at all. Jest isn't magically going to connect products or appContext, both local variables inside the component function, to the completely unrelated value that happens to have the same name inside the test. How could it, even?! Please do test before posting, this gives Cannot spy the appContext property because it is not a function; undefined given instead.
    – jonrsharpe
    May 22 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.