React testing library fireEvent.click error null

Question

I am getting an error in jest where the click event is not firing but the change event is working. I check the button is in the document before but still throws an error. I'm getting the following error in jest:

Expense Tracker App › should add a new expense

TypeError: Cannot read properties of null (reading 'addEventListener')

  58 |         expect(expenseType.value).toBe("mortgage");
  59 |
> 60 |         fireEvent.click(addExpenseButton);
     |                   ^
  61 |

my test is:

it("should add a new expense", async () => {
    render(<App />);
    const expenseDescription =
        screen.getByPlaceholderText(/Expense description/i);
    const expenseAmount = screen.getByPlaceholderText(/Amount/i);
    const expenseType = screen.getByRole("combobox", {
        name: /Type of expense:/i,
    });
    const addExpenseButton = screen.getByRole("button", {
        name: /Add Expense/i,
    });

    expect(expenseDescription).toBeInTheDocument();
    expect(expenseAmount).toBeInTheDocument();
    expect(screen.getAllByRole("option").length).toBe(9);
    expect(expenseType).toBeInTheDocument();
    expect(addExpenseButton).toBeInTheDocument();

    fireEvent.change(expenseDescription, {
        target: { value: "test expense" },
    });
    fireEvent.change(expenseAmount, { target: { value: "1000" } });
    fireEvent.change(expenseType, {
        target: { value: "mortgage" },
    });

    expect(expenseDescription.value).toBe("test expense");
    expect(expenseAmount.value).toBe("1000");
    expect(expenseType.value).toBe("mortgage");

    fireEvent.click(addExpenseButton);

});

It looks like fireEvent.change is working but the click is not

React testing library fireEvent.click error null

0 Answers0