在前端开发中，国际化是一个不可避免的问题。i18next 是一个流行的国际化库，它提供了一种方便的方法来管理多语言应用程序。然而，在测试中使用 i18next 可能会导致测试结果受到本地化影响，这是我们不想看到的。在本文中，我们将介绍如何在 Jest 中集成 i18next，以避免这个问题。
安装 i18next 和相关插件
首先，我们需要安装 i18next 和相关的插件。我们可以使用以下命令来安装它们：
npm install i18next i18next-xhr-backend i18next-browser-languagedetector
这里我们使用了 i18next-xhr-backend 和 i18next-browser-languagedetector 插件，前者用于加载语言资源，后者用于检测浏览器的语言设置。
初始化 i18next
我们需要在测试文件中初始化 i18next。这可以通过以下代码实现：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- ----------------------
------ -------- ---- -----------------------------------
-------
-------------
--------------
-------
------------ -----
------ ------
-------------- -
------------ ------
--
-------- -
--------- -------------------------------
--
---在这里，我们使用了 i18next-xhr-backend 插件来加载语言资源，i18next-browser-languagedetector 插件来检测浏览器的语言设置。fallbackLng 用于指定默认语言，debug 用于开启调试模式，interpolation 用于设置插值方式，backend.loadPath 用于指定语言资源的加载路径。
集成 i18next 到 Jest
现在，我们需要将 i18next 集成到 Jest 中。这可以通过以下代码实现：
-- -------------------- ---- -------
------ ------- ---- ----------
----- ---- - -------------------------
----------- - -----
--------------- -- -- -
----- -----------
------------ -----
------ ------
-------------- -
------------ ------
--
-------- -
--------- -------------------------------
--
---
---在这里，我们创建了一个全局的 i18n 实例，并将其赋值给全局变量 global.i18n。然后，在 beforeAll 钩子函数中，我们初始化了 i18n 实例。
编写测试用例
现在，我们可以编写测试用例了。在测试用例中，我们可以使用 i18n.t 函数来获取翻译结果。例如：
test('should render the correct text', () => {
const { getByText } = render(<MyComponent />);
expect(getByText(i18n.t('hello'))).toBeInTheDocument();
});在这里，我们通过 i18n.t('hello') 来获取翻译结果，并将其传递给 getByText 函数来查找对应的元素。
结论
在本文中，我们介绍了如何在 Jest 中集成 i18next，以避免测试结果受到本地化影响。我们首先安装了 i18next 和相关插件，然后初始化了 i18next，最后将其集成到 Jest 中。通过这种方式，我们可以轻松地编写不受本地化影响的测试用例。
示例代码
完整的示例代码可以在以下 GitHub 仓库中找到：
https://github.com/example/i18next-jest-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675538511b963fe9cc52e3a4