react-i18next 的单元测试覆盖率答案

【问题标题】：Unit Test Coverage with react-i18nextreact-i18next 的单元测试覆盖率
【发布时间】：2018-11-19 20:56:51
【问题描述】：

我有一个相当简单的 React 组件，它使用 i18next 实现了国际化功能。我使用的 i18next 版本是 11.9.0，我使用的 react-i18next 版本是 8.1.0。组件（和规格）看起来像这样：

TestComponent.component.js

import React, { Component } from "react";
import { I18n } from "react-i18next";

export class TestComponent extends Component {
  render() {
    return (
      <I18n ns="translations">
        { t => (
          <p>
            {t('test')}
          </p>
        )}
      </I18n>
    );
  }
}

export default TestComponent;

TestComponent.component.spec.js

import React from "react";
import { I18n } from "react-i18next";
import { shallow } from "enzyme";

import TestComponent from './TestComponent.component';

describe('TestComponent', () => {
  describe('Snapshot Test', () => {
    it('it matches snapshot', () => {
      const wrapper = shallow(<TestComponent />);
      wrapper.instance().render();
      expect(wrapper.instance()).toMatchSnapshot();
    });
  });
});

我正在尝试使用 Jest Snapshots 测试这个组件，但是当我检查这个组件的代码覆盖率时，它显示覆盖率检查器没有到达 t 函数。

我想这可以通过以某种方式模拟 I18n 来解决，但我在网上找到的所有示例都没有解决我的问题。

任何人都可以提供一些关于为什么覆盖检查器没有达到 t 函数的见解吗？需要做什么才能提高我对此类组件的覆盖率？

【问题讨论】：

你正在做一个浅渲染，这意味着只有那个组件被渲染，而不是它的孩子，因此 i18next 提供者根本不起作用。

标签： reactjs testing i18next react-i18next

【解决方案1】：

免责声明：我不确定 HOC 是否是通过子回调呈现另一个组件的组件的有效术语。如果我需要更正措辞，请告诉我。

3 种不同的方法可用：

使用dive()，您仍然可以使用shallow() 渲染来钻取HOC。
同时导出 HOCed 和原始版本的组件 - 为原始版本编写单元测试。
使用mount() 而不是shallow() - 对我来说这太过分了，可能会导致意外情况。

【讨论】：

感谢您的建议！我明天会通过它们。希望我们不需要第三个，因为我喜欢推迟 mount 进行集成测试。为清楚起见，HoC 如何与我的组件（使用渲染组件而不是 Translate HoC）绑定？也许这就是这里缺少的拼图？
抱歉，无法理解您的问题。你能改写一下吗？
所以据我所知，我的实现没有使用 HoC（HoC 是一个函数包装器，它包装组件并将 t 函数作为道具传递）。它使用了一个实际的组件，该组件将 t 函数传递给它的子级。我打算做一些关于用 HoC 替换它的研究，但我不希望这成为解决方案，因为在项目的这个阶段这将是一个很大的重构。
哦，对不起，当然，您的代码没有 HOC 功能。我不知道是否还有其他术语用于使用子回调将一些数据传递到嵌套组件中的组件。无论如何.dive() 仍然允许你渲染孩子。