为什么 jest 无法为我正在测试的自定义 React 挂钩提供 useTranslation 挂钩？

Question

我正在为自定义挂钩创建测试并检查它是否正确解析数据。自定义挂钩使用 i18next useTranslation 挂钩。我以这种方式模拟了测试文件中的 useTranslation 挂钩：

jest.mock('react-i18next', () => ({
  useTranslation: () => {
    return {
      t: (key: string) => key,
    }
  },
}))

它没有给我任何错误，它只是不翻译和 returns 它必须翻译的字段上的本地化键。我是在嘲笑错误的方式还是应该做一些额外的配置？

Answer 1

我认为对模拟和测试目的存在误解。

根据笑话 documentation:

Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with new, and allowing test-time configuration of return values.

如果您想测试 useTranslation 挂钩的功能，您可以创建一个测试（无需模拟）。通过这种方式，您可以在不同的场景下测试您的挂钩功能和行为。

现在回到你的代码，如果你想测试一个使用外部函数的组件，你可以模拟这个函数并将它传递给组件。所以在这种情况下你只需要模拟函数并写一些关于它的异常。

比如你有一个表单组件，有一个提交按钮，通过提交，数据会被发送到服务器，所以你可以模拟这个提交动作，并把它传递给测试环境的组件，然后您希望通过单击提交按钮，处理函数调用一次。

所以如果你想模拟你的钩子，你需要return模拟它的数据：

const mockMyHook = jest.fn(x => 'translated');

现在在您的组件中调用这个模拟飞节并期望使用 x 输入，得到一个 tanslated 值。

为什么 jest 无法为我正在测试的自定义 React 挂钩提供 useTranslation 挂钩？

Why is jest not able to provide the useTranslation hook to a custom React hook I'm testing?

typescript

i18next

reactjs

jestjs

react-hooks