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来解决此问题，但是我在网上发现的所有示例都不能解决我的问题。

任何人都可以提供一些见解，以了解为什么覆盖率检查程序在这里没有达到t函数吗？为了扩大对此类组件的了解，需要做些什么？

Answer 1

免责声明：我不确定HOC是否对通过子级回调呈现另一个组件的组件有效。让我知道是否需要纠正措辞。

3种可用的方法：

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

使用react-i18next进行单元测试

1 个答案: