使用 react-i18next 的单元测试覆盖率

Question

我有一个相当简单的 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 来解决，但是我在网上找到的 none 示例已经解决了我的问题。

任何人都可以深入了解为什么覆盖率检查器没有到达这里的 t 函数吗？需要做什么才能提高我对此类组件的覆盖率？

Answer 1

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

3 种不同的方法可用：

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

使用 react-i18next 的单元测试覆盖率

Unit Test Coverage with react-i18next

reactjs

testing

i18next

react-i18next