How to test if a functions is called in React?

Question

Working template of the project: https://codesandbox.io/s/blue-currying-3me1t

The only test I have set up is in src/App.test.js to check that a name is rendered. I am trying to setup another test that checks to see if a function is called before the buttons are generated.

In FontAwesome.js there is a registerIcons() function that registers all of the icons needed for the website. I call this function in Buttons.js as it is the place where I use the icons.

I want to create a test in App.test.js that checks to see if registerIcons() is called before the buttons are created in Buttons.js.

FYI, may be below link will help you. stackoverflow.com/questions/40393486/… — nav99
– nav99, Commented Jul 24, 2020 at 6:20
Not really helpful for my case. They are testing render on click via simulation. — arctic
– arctic, Commented Jul 24, 2020 at 6:29

CampbellMG · Accepted Answer · 2020-07-24 07:13:48Z

2

You could typically do this by manually mocking your FontAwesome dependency like this:

import React from "react";
import { render } from "@testing-library/react";
import Button from "./Buttons.js";
import registerIcons from './FontAwesome'

jest.mock('./FontAwesome', () => ({
  __esModule: true
  default: jest.fn()
}))


test("registers icons", () => {
  render(<Button />);

  expect(registerIcons).toHaveBeenCalled();
});

However, it seems code sandbox does not currently support mocking. You could try it in your own IDE though.

edited Jul 24, 2020 at 7:13

answered Jul 24, 2020 at 6:44

CampbellMG

2,2101 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arctic Over a year ago

I am getting an error that says TypeError: (0 , _FontAwesome.default) is not a function and all of the stackoverflow answers for this error involved incorrectly implemented import statements. However, I think that all of my import statements are formatted correctly. Any suggestions?

CampbellMG Over a year ago

I missed the __esModule: true from the export. I've just added it to my answer, try including that

Collectives™ on Stack Overflow

How to test if a functions is called in React?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related