How to properly mock dependencies in Jest when testing React components?
I tried several approaches but none seem to work. I'm having an scenario with mocking dependencies in my unit tests for a React component using Jest. I have a simple component that fetches data from an API and displays it. My component looks like this: ```javascript import React, { useEffect, useState } from 'react'; import fetchData from './fetchData'; const DataDisplay = () => { const [data, setData] = useState(null); useEffect(() => { const loadData = async () => { const result = await fetchData(); setData(result); }; loadData(); }, []); return <div>{data ? data.message : 'Loading...'}</div>; }; export default DataDisplay; ``` In my test file, I tried to mock the `fetchData` function like this: ```javascript import React from 'react'; import { render, screen } from '@testing-library/react'; import DataDisplay from './DataDisplay'; import fetchData from './fetchData'; jest.mock('./fetchData'); test('displays message after fetching data', async () => { fetchData.mockResolvedValue({ message: 'Hello, World!' }); render(<DataDisplay />); const message = await screen.findByText(/Hello, World!/); expect(message).toBeInTheDocument(); }); ``` However, I'm working with an behavior that says `TypeError: want to read properties of null (reading 'message')` when `data` is still `null` and the component tries to render. I want to ensure that the data is correctly mocked and that the component handles the state appropriately. I've tried wrapping the `fetchData.mockResolvedValue` in a `beforeEach` block, but that didn't change the outcome. I also verified that my Jest configuration is correct and that no other tests are interfering with this one. Additionally, I am using Jest version 27.0.6 and React Testing Library version 12.1.2. Any insights on how to address this scenario or improve my testing setup would be greatly appreciated! Any ideas how to fix this?