Folder structure:

| __mocks__

| api

| pet.js

| src

| api

| pet.js

__mocks__/api/pet.js

// __mocks__/api/pet.js

import { readFileSync } from ‘fs‘
import path from ‘path‘
import { act } from ‘@testing-library/react‘

const breeds = [{ name: ‘apple‘ },{ name: ‘meat‘ },{ name: ‘drink‘ }]
const doggos 
 
= JSON.parse(
  readFileSync(path.join(__dirname),‘res.json‘).toString(),)

export const ANIMALS = [‘dog‘,‘cat‘,‘bird‘]
export const _breeds = breeds
export const _dogs = doggos.animals

const mock = {
  // mock the breeds function
  breeds: jest.fn(() => {
    return {
      // breeds function is promise based
 

      // should have then function on it
      // act: info react we have done things need to be udpated
      then: (callback) => act(() => callback({ breeds })),}
  }),animals: jest.fn(() => {
    return {
      then: (callbacka) => act(() => callback(doggs)),}

export default mock

Component test:

import React from ‘react‘
import { render,fireEvent } from ‘@testing-library/react‘

import pet,{ ANIMALS,_breeds,_dogs } from ‘@api/pet‘
afterEach(() => {
  jest.clearAllMocks()
})

test(‘SearchParams‘,async () => {
  const { container,getByText,getByTestId } = render(<SearchParams />)
  const animalDropdown = getByTestId(‘use-dropdown-animal‘)
  expect(animalDropdown.children.length).toEqual(ANIMALS.length + 1)
  expect(pet.breeds).toHaveBeenCalled()

  const breedDropdown = getByTestId(‘use-dropdown-breed‘)
  expect(breedDropdown.children.length).toEqual(_breeds.length + 1)
  expect(pet.breeds).toHaveBeenCalled()

  const searchResult = getByTestId(‘search-results‘)
  expect(searchResult.textContent).toEqual(‘No pets found‘)
  fireEvent(getByText(‘Submit‘),new MouseEvent(‘click‘))
  expect(searchResult.children.length).toEqual(_dogs.length)

  // run jest -u will udpate the snapshot
  expect(container.firstChild).toMatchInlineSnapshot()
})