TypeError: is not a function – in simple react component

I’ve created a very simple button component, which is importing another function. For testing (using jest and testing library) I have to mock the imported function:

component

import React from 'react'
import { Button } from 'semantic-ui-react'
import { useReviewButton } from '@my-project/util-review'

export const ReviewButton = () => {
  const { button } = useReviewButton() // <--
 
  return (
    <Button onClick={button.onClick}>{button.text}</Button>
  )
}

export default ReviewButton

test

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

import ReviewButton from './ReviewButton'

const mockFinishDataset = jest.fn()
const mockUseReviewButton = jest.fn(() => { return {
  button: {
    text: 'click me',
    onClick: mockFinishDataset
  }
}})

jest.mock('@my-project/util-review', () => {
  return jest.fn(() => ({
    useReviewButton: mockUseReviewButton
  }))
})

describe('ReviewButton', () => {
  test('should render button', () => {
    render(<ReviewButton />)
    const button = screen.getByRole('button')
    expect(button).toHaveContent('Click me')
  })
})

But the test fails with the error Error: Uncaught [TypeError: (0 , _utilReview.useReviewButton) is not a function] – which I do not understand.

Source: Ask Javascript Questions

LEAVE A COMMENT