如何使用 Jest 模拟异步 function

Question

我一直在开玩笑地模拟我的提交 function 但我总是收到这个错误：

期望(jest.fn()).toHaveBeenCalled()

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

我该如何解决这种错误？

这是我的测试文件。

it('checks the function submitTodo', () => {
    const submitTodo = jest.fn();
    const { getByTestId } = render(<InputField />);
    const input = getByTestId('input');
    fireEvent.change(input, { target: { value: 'test' } })

    fireEvent.submit(getByTestId('form'))
    expect(submitTodo).toHaveBeenCalled()
})

这是我的功能组件，我在其中调用我的异步 function。

import { useState } from 'react';
import { firestore } from 'firebase/firebaseConfig';
import firebase from 'firebase/firebaseConfig';
import styles from 'theme/main.module.scss';

const InputField = () => {
  const [todo, setTodo] = useState('');

  const submitTodo = async (e) => {
    e.preventDefault();
    try {
      await firestore.collection('todo').add({
        todo,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });
    } catch (error) {
      alert(error);
    }
    setTodo('');
  };
  return (
    <form
      data-testid='form'
      className={styles.inputFieldContainer}
      onSubmit={(e) => submitTodo(e)}
    >
      <input
        data-testid='input'
        className={styles.inputFieldContainer__input}
        placeholder='Please enter a todo.'
        required
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
      />
      <button
        data-testid='submitBtn'
        className={styles.inputFieldContainer__btn}
        type='submit'
      >
        Submit
      </button>
    </form>
  );
};

export default InputField;

Answer 1

submitTodo是InputField的内部 function 。 你不能直接使用 jest.fn() 来模拟它。 如果你只是想测试 submitTodo function 是否被调用，那么你可以这样做。

it('checks the function submitTodo', () => {
    const submitTodoForTest = jest.fn();
    const { getByTestId } = render(<InputField submitTodoForTest={submitTodoForTest} />);
    const input = getByTestId('input');
    fireEvent.change(input, { target: { value: 'test' } })

    fireEvent.submit(getByTestId('form'))
    expect(submitTodoForTest).toHaveBeenCalled()
})

// In your component
  const InputField = ({submitTodoForTest = null}) => {
  const [todo, setTodo] = useState('');

  const submitTodo = async (e) => {
  submitTodoForTest && submitTodoForTest();
    e.preventDefault();
    try {
      await firestore.collection('todo').add({
        todo,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });
    } catch (error) {
      alert(error);
    }
    setTodo('');
  };
  return (
    ....
  );
};

但是如果你需要测试fireStore是否被调用，那么你也需要mock fireStore。