Покрытие модульных тестов с помощью react-i18next

У меня есть довольно простой компонент 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, но когда я проверяю покрытие кода для этого компонента, он показывает, что функция t не достигается средством проверки покрытия.

Я полагаю, что это можно решить, издевавшись над I18n, но ни один из примеров, которые я нашел в Интернете, не решил мою проблему.

Может ли кто-нибудь дать некоторое представление о том, почему средство проверки покрытия не достигает здесь функции t? Что нужно сделать, чтобы увеличить покрытие для такого компонента?


reactjs testing i18next react-i18next
person John Riley    schedule 19.11.2018    source источник
comment
Вы выполняете неглубокий рендеринг, это означает, что рендерится только этот компонент, а не его дочерние элементы, поэтому поставщик i18next вообще не работает.   -  person felixmosh    schedule 20.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

Отказ от ответственности: я не уверен, является ли HOC допустимым термином для компонента, который отображает другой компонент через обратный вызов дочерних элементов. Дайте мне знать, если мне нужно исправить формулировку.

Доступны 3 различных подхода:

  1. используя dive(), вы можете детализировать HOC, все еще используя shallow() рендеринг.

  2. экспорт как HOCed, так и исходной версии компонента - с написанием модульных тестов для исходной версии.

  3. использование mount() вместо shallow() - как по мне, это излишне и может привести к непредвиденным обстоятельствам.

person skyboyer    schedule 19.11.2018
comment
Спасибо за рекомендации! Я завтра их пробегу. Надеюсь, нам не понадобится третий, так как я предпочитаю откладывать монтирование для интеграционного тестирования. Просто для ясности, как HoC связан с моим компонентом (который использует компонент рендеринга, а не Translate HoC)? Может быть, это недостающий кусочек головоломки? - person John Riley; 20.11.2018
comment
извините, не могу понять ваш вопрос. не могли бы вы это перефразировать? - person skyboyer; 20.11.2018
comment
Таким образом, моя реализация не использует HoC, насколько я понимаю (HoC является оболочкой функции, которая обертывает компонент и передает функцию t как опору). Он использует реальный компонент, который передает функцию t своим потомкам. Я собираюсь провести небольшое исследование по замене его на HoC, но я не хочу, чтобы это было решением, потому что на данном этапе проекта это потребовало бы большого рефакторинга. - person John Riley; 20.11.2018
comment
о, извините, конечно, в вашем коде нет функции HOC. Я не знаю, есть ли другой термин для компонентов, которые используют обратный вызов дочерних элементов для передачи некоторых данных во вложенные компоненты. в любом случае .dive() по-прежнему позволяет отображать дочерние элементы. - person skyboyer; 20.11.2018