0

I'm running into the following errors in the console after running npm test:
"TypeError: (0 , _App.getCoords) is not a function" console error image

console.error TypeError: (0 , _App.getCoords) is not a function

  30 |
  31 |         // when
> 32 |         const result = await getCoords();
     |                                       ^
  33 |
  34 |         // then
  35 |         expect(axios.get).toHaveBeenCalledWith(baseURL);

App.test.js file:

import { render, waitForElement } from '@testing-library/react';
import axios from 'axios';
import { baseURL, getCoords } from './App'
import App from './App';

// console.log(getCoords)
jest.mock("axios");

const coords = [
    { 
        _id: "63c56b4dd6402c9bd41bef78", 
        lng: -74.03903, 
        lat: 41.02881, 
        false: false
    },
    { 
        _id: "63c56b4dd6402t7bd41bef78", 
        lng: -74.05648, 
        lat: 41.95185, 
        false: false
    }
];

describe('getCoords', () => {
    it("should return coordinates data", async () => {
        axios.get.mockResolvedValue({ data: coords});
        
        // render
        // render(<App />);

        // when
        const result = await getCoords();

        // then
        expect(axios.get).toHaveBeenCalledWith(baseURL);
        expect(result).toEqual(coords);

    });
});

App.js code snippets:

const App = () => {
....
  // Getting all coords
  const getCoords = () => {
    axios.get(baseURL)
    .then((res) => {
      console.log(res.data)
      setCoords(res.data)
    })
    .catch((error) => console.error(error))
  }
...


return(
    <BrowserRouter>
      <header className="sticky text-center w-screen">
        <Routes>
          <Route index element={<Header/>}></Route>
          <Route path="/list" element={<NavHeader/>}>
            <Route path=":id" ></Route>
            <Route path=":id/edit" ></Route>
          </Route>
          <Route path="/map" element={<NavHeader/>}></Route>
        </Routes>
      </header>
      <main className="h-[700px]">
        <Routes>
            <Route index element={<Home handleGeolocate={handleGeolocate} submitStatus={submitStatus} recordSuccess={recordSuccess}/>}></Route>
            <Route path="/list">
              <Route index element={<List coords={coords} handleDelete={handleDelete}/>}></Route>
              <Route path=":id" element={<EachCoordDetail coords={coords} handleDelete={handleDelete}/>}></Route>
              <Route path=":id/edit" element={<EachCoordEdit coords={coords} handleEdit={handleEdit}/>}></Route>
            </Route>
            <Route path="/map" element={<Map coords={coords} currentLocation={currentLocation}/>}></Route>
            <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </main>
    </BrowserRouter>
  )

I want to run a test to check if function containing the API call is being executed as expected on App.js file load since the getCoords and getCurrentLocation functions are inside the useEffect hook. I found some video and blog tutorials that used mock data which I have set up in my App.test.js file however I'm getting the above errors. Do i need to mock the getCoords function as well? I'm using Jest and react-testing-library to conduct this test and I'm pretty new to testing and setting up the testing environment.

Andrew Saganda
  • 1
  • 3

1 Answers1

0

According to your terminal print, the error is on the Web navigator API. You should mock the function getCurrentPosition. Maybe this answer can be helpful.

Carlos Querioz
  • 277
  • 3
  • 7
  • hey carlos, I've updated my problem above and am still stuck. Mocking functions and api calls isn't clicking for me :/ – Andrew Saganda Apr 10 '23 at 21:28
  • Are you getting the same error? Can you share the results? – Carlos Querioz Apr 12 '23 at 00:09
  • Different error. The error of "getCoords not a function" (I edited my original post and the first code block is the error, the first link goes to a screenshot). From troubleshooting and searching online, my interpretation of the error is that the function getCoords isn't being exported - it's scoped inside the functional component App – Andrew Saganda Apr 12 '23 at 16:50
  • I know you posted a snippet from your App component, but when I tried to understand your code I couldn't see the whole picture. In your snippet, the getCoords function is not exported unless you've already exported it. Also, your error message was: getCoords is not a function. Other than that, maybe you should test your whole component instead of testing just testing a unique function inside that. – Carlos Querioz Apr 14 '23 at 10:25