Guide on mocking a function inside another function imported from a module with TypeScript and Jest

Question

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

I have a function inside the action directory that I want to test:

import { Action, ActionProgress, ActionStatus, MagicLinkProgress } from '../../interfaces'
import { areSameActions } from '../actionsProgress'

export const findActionProgressToDisplay = (progress: MagicLinkProgress, actions: Array<Action>): ActionProgress => {
  const actionProgressFound = progress.actionsProgress.find(
    (actionProgress) => actionProgress.status === ActionStatus.PENDING && actions.some((action) => areSameActions(actionProgress.action, action))
  )
  if (!actionProgressFound) {
    throw new Error('No action found to display')
  }

  return actionProgressFound
}

The function findActionProgressToDisplay calls another function called areSameActions which is imported from ../actionsProgress.

Here is the function that needs to be mocked :

import { Action } from '../../interfaces'

export const areSameActions = (firstAction: Action, secondAction: Action): boolean =>
  firstAction.origin === secondAction.origin && firstAction.type === secondAction.type && firstAction.url === secondAction.url

Below is the jest test I attempted:

import { mockActions } from './../../mocks/campaigns/index'
import { mockActionsProgress, mockProgress } from './../../mocks/magicLinks/index'
import { findActionProgressToDisplay } from './index'
import { describe, test, expect } from '@jest/globals'
import { ActionStatus } from '../../interfaces'
import * as module from '../actionsProgress/index'

module.areSameActions = jest.fn().mockReturnValue(true)

describe('=== findActionProgressToDisplay ===', () => {
  test('should return true', () => {
    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    const actionFound = findActionProgressToDisplay(progress, actions)

    expect(actionFound.status).toEqual(ActionStatus.PENDING)
  })
})

But I encountered this error: Cannot assign to 'areSameActions' because it is a read-only property. This makes sense since areSameActions is a const.

I also tried the following approach:

import { mockActions } from './../../mocks/campaigns/index'
import { mockActionsProgress, mockProgress } from './../../mocks/magicLinks/index'
import { findActionProgressToDisplay } from './index'
import { describe, test, expect } from '@jest/globals'
import { ActionStatus } from '../../interfaces'
import * as module from '../actionsProgress/index'

jest.spyOn(module, 'areSameActions').mockReturnValue(true)

describe('=== findActionProgressToDisplay ===', () => {
  test('should return true', () => {
    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    const actionFound = findActionProgressToDisplay(progress, actions)

    expect(actionFound.status).toEqual(ActionStatus.PENDING)
  })
})

However, I received this error: TypeError: Cannot redefine property: areSameActions. I am unsure why this issue occurred.

Lastly, I attempted the following solution:

import { mockActions } from './../../mocks/campaigns/index'
import { mockActionsProgress, mockProgress } from './../../mocks/magicLinks/index'
import { findActionProgressToDisplay } from './index'
import { describe, test, expect } from '@jest/globals'
import { ActionStatus } from '../../interfaces'
import { areSameActions } from '../actionsProgress/index'

jest.mock('../actionsProgress/index', () => {
  const original = jest.requireActual('../actionsProgress/index') 
  return {
    ...original,
    areSameActions: jest.fn(),
  }
})
describe('=== findActionProgressToDisplay ===', () => {
  test('should return true', () => {
    areSameActions.mockImplementation(() => (true))

    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    const actionFound = findActionProgressToDisplay(progress, actions)

    expect(actionFound.status).toEqual(ActionStatus.PENDING)
  })
})

Unfortunately, I received an error stating: Property 'mockImplementation' does not exist on type '(firstAction: Action, secondAction: Action) => boolean'. This error seems reasonable considering in the current context, areSameActions is a function and not a mock.

Could you provide guidance on how to mock / stub / spy the function areSameActions to effectively test findActionProgressToDisplay?

javascript typescript jestjs mocking

Answer 1

Answer №1

It was the closest attempt to the truth.

Indeed, jest.mock mocks a module when it is required. So:

jest.mock('../actionsProgress/index', () => {
  const original = jest.requireActual('../actionsProgress/index') // Step 2.
  return {
    ...original,
    areSameActions: jest.fn(),
  }
})

The mock is created successfully. However, for some unknown reason, typescript interprets that areSameActions is a function instead of a mock. To clarify this, I explicitly specify my function as a Mock.

Here is the solution:

import { mockActions } from './../../mocks/campaigns/index'
import { mockActionsProgress, mockProgress } from './../../mocks/magicLinks/index'
import { findActionProgressToDisplay } from './index'
import { describe, test, expect } from '@jest/globals'
import { ActionStatus } from '../../interfaces'
import * as module from '../actionsProgress/index'

jest.mock('../actionsProgress/index', () => {
  const original = jest.requireActual('../actionsProgress/index')
  return {
    ...original,
    areSameActions: jest.fn(),
  }
})

describe('=== findActionProgressToDisplay ===', () => {
  test('should return the founded action', () => {
    module.areSameActions as jest.Mock
    // @ts-ignore
    module.areSameActions.mockImplementation(() => true)
    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    const actionFound = findActionProgressToDisplay(progress, actions)

    expect(actionFound.status).toEqual(ActionStatus.PENDING)
  })

  test('should throw error because this case is not supposed to happen', () => {
    module.areSameActions as jest.Mock
    // @ts-ignore
    module.areSameActions.mockImplementation(() => false)
    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    expect(() => findActionProgressToDisplay(progress, actions)).toThrowError('No action found to display')
  })
})

Answer 2

It was the closest attempt to the truth.

Indeed, jest.mock mocks a module when it is required. So:

jest.mock('../actionsProgress/index', () => {
  const original = jest.requireActual('../actionsProgress/index') // Step 2.
  return {
    ...original,
    areSameActions: jest.fn(),
  }
})

The mock is created successfully. However, for some unknown reason, typescript interprets that areSameActions is a function instead of a mock. To clarify this, I explicitly specify my function as a Mock.

Here is the solution:

import { mockActions } from './../../mocks/campaigns/index'
import { mockActionsProgress, mockProgress } from './../../mocks/magicLinks/index'
import { findActionProgressToDisplay } from './index'
import { describe, test, expect } from '@jest/globals'
import { ActionStatus } from '../../interfaces'
import * as module from '../actionsProgress/index'

jest.mock('../actionsProgress/index', () => {
  const original = jest.requireActual('../actionsProgress/index')
  return {
    ...original,
    areSameActions: jest.fn(),
  }
})

describe('=== findActionProgressToDisplay ===', () => {
  test('should return the founded action', () => {
    module.areSameActions as jest.Mock
    // @ts-ignore
    module.areSameActions.mockImplementation(() => true)
    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    const actionFound = findActionProgressToDisplay(progress, actions)

    expect(actionFound.status).toEqual(ActionStatus.PENDING)
  })

  test('should throw error because this case is not supposed to happen', () => {
    module.areSameActions as jest.Mock
    // @ts-ignore
    module.areSameActions.mockImplementation(() => false)
    const progress = mockProgress({ actionsProgress: mockActionsProgress() })
    const actions = mockActions()
    expect(() => findActionProgressToDisplay(progress, actions)).toThrowError('No action found to display')
  })
})

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

Answer №1

Similar questions

Obtain the total sum from the array of objects that are nested within

What is the best way to convert a dynamic HTML table with input fields into an Excel spreadsheet?

Tips for inserting a property into an array of objects when it matches the specified ID

Error message in Vuex4: Unable to access 'state' property because it is undefined

The search results fail to show the required information

Altering iframe Content with the Help of Selenium Web Driver

Angular ng-repeat with toggle filter

Tips for accessing the most recent embedded document added using the push() method

What should be included in the types field of package.json for TypeScript libraries?

Can an excessive amount of classes cause my Angular application to run sluggishly?

implementing conditional logic in angularjs expressions

Angular is using the previous parameter value upon clicking the button

Tips for mocking the router.navigate function in Jest

Combine a string variable and an array object in JavaScript or AngularJS

How can I create a hover effect animation in React?

"Utilizing the power of Angular 6's JSON pipe

What is the best way to insert a record into the rth column of the nth row in a table

Integration of Mocha with WebStorm

Generate a collection of elements using a different collection as a reference

Tips for shrinking a sticky header when scrolling using Angular and JavaScript