內部包含功能組件的功能組件 - 測試

Question

我有一個功能組件，我想用 jest 編寫測試。 但我無法評估結果。 我應該如何為這樣的組件編寫測試？ 這是我要測試的組件：

import React from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { addExpense } from "../store/expenses/actions";

const AddExpensePage = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  function onSubmit(expense) {
    dispatch(addExpense(expense));
    navigate("/");
  }

  return (
    <div>
      <h1>Add Expense</h1>
      <ExpenseForm onSubmit={onSubmit} />
    </div>
  );
};

export default AddExpensePage;

我寫了這個測試：

import React from "react";
import * as reactRedux from "react-redux";
import { shallow } from "enzyme";
import AddExpensePage from "../AddExpensePage";
import expenses from "../../fixtures/expenses";

// Mock useDispatch hook
const useDispatch = jest.spyOn(reactRedux, "useDispatch");

jest.mock("react-redux", () => ({
  ...jest.requireActual("react-redux"),
  useDispatch: jest.fn(),
}));

const mockedUsedNavigate = jest.fn();

jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useNavigate: () => mockedUsedNavigate,
}));

beforeEach(() => {
  useDispatch.mockClear();
});

test("should render AddExpensePage correctly", () => {
  const wrapper = shallow(<AddExpensePage />);
  expect(wrapper).toMatchSnapshot();
});

test("should handle onSubmit", () => {
  const dispatch = jest.fn();
  useDispatch.mockReturnValue(dispatch);
  const onSubmitSpy = jest.fn();
  const wrapper = shallow(<AddExpensePage onSubmit={onSubmitSpy} />);
  wrapper.find("ExpenseForm").prop("onSubmit")(expenses[1]);
  expect(dispatch).toHaveBeenCalled();
  expect(mockedUsedNavigate).toHaveBeenLastCalledWith("/");
  // expect(onSubmitSpy).toHaveBeenLastCalledWith(expenses[1]);
});

我不確定這條線是否有效“wrapper.find("ExpenseForm").prop("onSubmit")(expenses[1]);"

我還想測試這個“expect(onSubmitSpy).toHaveBeenLastCalledWith(expenses[1]);”。 但我找不到如何做到這一點。

你有什么想法可以幫助我嗎？

請告知我應該如何編寫測試這些組件。

提前致謝。

Answer 1

建議測試組件的行為，而不是它們的實現。 因此，與其以編程方式調用 function，不如找到調用它的按鈕並模擬點擊。 與接受測試的 function 處理的數據的文本輸入（我想）相同。

此外，如果您的組件不接受這樣的道具，則不能通過將 function 作為道具傳遞來簡單地模擬 function。

test("should handle onSubmit", () => {
  const dispatch = jest.fn();
  const navigate = jest.fn();
  useDispatch.mockReturnValue(dispatch);
  useNavigate.mockReturnValue(navigate);

  const wrapper = shallow(<AddExpensePage />);
  const submitBtn = wrapper.find('button[type="submit"]');
  submitBtn.simulate('change', { target: { value: 'myMock' } } );
  
  expect(dispatch).toHaveBeenCalled();
  expect(navigate).toHaveBeenCalledWith("/");
});