未使用 react-testing-library 调用模拟函数，但调用了原始函数

Question

我想，我有一个简单的案例。我在我的组件中使用了一个从不同文件导入的函数。我已经模拟了如下所示的函数。我也尝试过添加一个模拟实现，但这也不起作用。如果我在我的原始函数中添加了一条打印语句，它会在我运行测试时出现。如果我理解正确，模拟应该替换原来的。

我尽量让这件事简单明了，所以我不确定我错过了什么。

测试文件：

import AddStoryModal from './AddStoryModal';
import addStory from '../api/add_story';

jest.mock('../api/add_story');

describe('Story tests', () => {

  it('makes an API call to add a story', () => {
    render(<AddStoryModal />);

    const submitButton = screen.getByTestId('add-submit');  
    fireEvent.click(submitButton);
    expect(addStory).toHaveBeenCalled();
  });
});

结果：

 expect(jest.fn()).toBeCalled()

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

正在测试的组件：

...
import addStory from '../api/add_story';

function AddStoryModal(){

  const onFinish = (values) => {
    addStory();
  };

  return (
    <>
      <Button type="primary" data-testid="add-story" onClick={showModal}>
        Create New +
      </Button>

      <Modal title="Add New Story ..." visible={visible} data-testid='add-story-modal' onCancel={handleCancel} footer={null}>
        <Form form={form} layout="vertical" onFinish={onFinish}>
          ...
          <Form.Item>
            <Button type="primary" data-testid="add-submit" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}

Answer 1

这是一个很好的例子，说明编写测试如何使您的生产代码更好。是的，您可以继续使用jest.mock(*module*) 并找出问题所在，但是为什么？

看看AddStoryModal 实际在做什么。它与调用 API 函数非常耦合，这反过来又使测试变得尴尬。

如果您将onFinish 实现函数作为道具传递，您会立即获得一些巨大的胜利：

• AddStoryModal 中的代码更少
• 它变得更加通用（并增加了被重复使用的机会）
• 测试变得更容易

AddStoryModal:

function AddStoryModal(props) {
  return (
   <>
  ...
        <Form form={form} layout="vertical" onFinish={props.onFinish}>
  ...
    </>
  );
}

现在它对../api/add_story一无所知

你的测试变成：

import AddStoryModal from './AddStoryModal';

describe('Story tests', () => {
  it('makes an API call to add a story', () => {
    const finishCallback = jest.fn();

    render(<AddStoryModal onFinish={finishCallback} />);

    const submitButton = screen.getByTestId('add-submit');
    fireEvent.click(submitButton);
    expect(finishCallback).toHaveBeenCalled();
  });
});

超级干净的测试，易于理解，更适合 React 方式。

在您的生产代码中，任何使用 <AddStoryModal /> 的页面现在都只使用 <AddStoryModal onFinish={addStory} />