0

我在这里有一个反应钩子表单，它工作得很好，我是 jest 测试的新手，并试图为它编写测试脚本，但在尝试执行提交函数时遇到了问题。

我一直在互联网上尝试不同的方法，但没有运气，所以我希望这里的人可以立即发现问题并帮助我了解问题。

AddNewProperty.js 组件

    export const AddNewProperty = () => {
    const dispatch = useDispatch();
    const agencyStore = useSelector((state) => state.agency)
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const onSubmit = data => {
        var dispatchData = data;
        dispatchData.meterReading = Number(data.meterReading);
        dispatch(agencyActions.addNewProperty(dispatchData));
    };

return ( ...

AddNewProperty.spec.js

    import React from 'react';
import {
  render as rtlRender,
  screen,
  fireEvent,
  waitFor,
  act,
  cleanup } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../../../store';
import AddNewProperty from './AddNewProperty';
import userEvent from '@testing-library/user-event'

const render = component => rtlRender(
  <Provider store={store()}>
    {component}
  </Provider>
)

beforeEach(() => {
  render(<AddNewProperty/>)
});

afterEach(cleanup);
const mockSubmit = jest.fn();

describe('Add New Property', () => {
test('submit form with no validation msgs', async () => {
    
    fireEvent.input(screen.getByRole("textbox", { name: /Apartment Number/i }), {
      target: {
        value: "159"
      }
    });

    fireEvent.input(screen.getByRole("textbox", { name: /Address/i }), {
      target: {
        value: "test street"
      }
    });

    fireEvent.input(screen.getByRole("textbox", { name: /Mprn/i }), {
      target: {
        value: "10010468307"
      }
    });

    fireEvent.input(screen.getByRole("textbox", { name: /Meter Reading/i }), {
      target: {
        value: "12345"
      }
    });

    fireEvent.input(screen.getByLabelText(/reading date/i), {
      target: {
        value: "2021-11-15"
      }
    });

    fireEvent.submit(screen.getByRole('button', {
      name: /submit/i
    }));

    expect(screen.getByLabelText("Apartment Number").value).toBe("159");
    expect(screen.getByLabelText("Address").value).toBe("test street");
    expect(screen.getByLabelText("MPRN").value).toBe("10010468307");
    expect(screen.getByLabelText("Meter Reading").value).toBe("12345");
    expect(screen.getByLabelText("Reading Date").value).toBe("2021-11-15");

    await waitFor(() => expect(screen.queryAllByRole("alert")).toHaveLength(0));
    await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
    expect(screen.getByLabelText("Apartment Number").value).toBe("");
    expect(screen.getByLabelText("Address").value).toBe("");
    expect(screen.getByLabelText("MPRN").value).toBe("");
    expect(screen.getByLabelText("Meter Reading").value).toBe("");
    expect(screen.getByLabelText("Reading Date").value).toBe("");
  });
});

错误

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

有人可以帮忙解决我哪里出错了，我尝试像下面这样设置 mockSubmit，同时将一个道具传递给组件，然后模拟该道具，但它阻止了表单与我们如何调用调度调用一起工作

    const mockSubmit = jest.fn((aptNum, address, mprn, readingDate, meterReading) => {
  return Promise.resolve({ aptNum, address, mprn, readingDate, meterReading });
})
4

0 回答 0