Как использовать перевод с компонентом, чтобы сделать его полезным для модульного тестирования - PullRequest
Новая
       11

Как использовать перевод с компонентом, чтобы сделать его полезным для модульного тестирования

0 голосов
/ 16 января 2020

Большинство компонентов выглядит следующим образом: 

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

class XYZ extends Component {
    constructor(props) {
    super(props);
    this.state = {
    };
  }

  .....
  .....


  render() {
    const { t } = this.props;

    return (

        ..... 
    );
  }
}

export default withTranslation()(XYZ);

или, как показано ниже, в случае функциональных компонентов: 

export const XYZ = withTranslation()(({ t, ...props }) => {
  ....
  return (
    .....
  );
});

Я хотел бы использовать мелкий фермент, как это было бы только модульное тестирование компонента XYZ, чем его дочерних компонентов, но с ним я сталкиваюсь с проблемой, поскольку первый уровень компонента - это перевод, и он не go для дочерних компонентов внутри XYZ. Итак, я думаю, что я не могу писать компоненты должным образом. Что вы предлагаете, так это правильный способ написания этого компонента класса и функции, чтобы тестирование было простым.

1 Ответ

2 голосов
/ 16 января 2020

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

export const MyComponent = props => (...);

export default componentDecorator(MyComponent);

Экспорт по умолчанию предназначен для обычного потребления приложения, тогда как обычный экспорт предназначен для тестирования. Это позволяет вам смоделировать все необходимые вам реквизиты или предоставить тестовые оболочки для внедрения реквизитов, к которым обычно обращаются провайдеры контекста. 

import { MyComponent } from '.'
...
shallow(<MyComponent {...mockTranslationProps} {...otherProps) />)

В проектах, в которых я участвую, мы используем response-intl для наших переводов, который как injectItnl HO C, который обеспечивает функцию intl.formatMessage, для тестов я просто создаю фиктивный объект intl, где функция перевода просто передает свой аргумент.

...