Reactjs 如何使用组件转换使其对单元测试有用

大多数组件如下所示：

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 (
    .....
  );
});

---

我想使用Ezyme shallow，因为它只对XYZ组件进行单元测试，而不对其子组件进行单元测试，但使用它时，我面临一个问题，因为组件的第一级是翻译，而不是XYZ内部的子组件。因此，我认为我可能没有正确地编写组件。您认为编写这个类和函数组件的正确方法是什么，这样测试就容易了

我发现容器模式对于单元测试非常有用。导出原始组件和默认导出装饰组件

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

export default componentDecorator(MyComponent);

默认导出用于正常应用程序消费，而常规导出用于测试。这允许您模拟所有需要的道具，或者提供测试包装器来注入通常通过上下文提供程序访问的道具

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

从“.”导入{MyComponent}
...
浅（）

---

在我参与的项目中，我们使用react intl进行翻译，它作为

injectItnl

HOC，提供

intl.formatMessage

功能，对于测试，我只创建了一个mock intl对象，其中translation函数只传递它的参数。

我发现容器模式对于单元测试非常有用。导出原始组件和默认导出装饰组件

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

export default componentDecorator(MyComponent);

默认导出用于正常应用程序消费，而常规导出用于测试。这允许您模拟所有需要的道具，或者提供测试包装器来注入通常通过上下文提供程序访问的道具

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

从“.”导入{MyComponent}
...
浅（）

---

在项目中，我是我们使用react intl进行翻译的一部分，它作为

injectItnl

HOC提供了

intl.formatMessage

函数，对于测试，我只创建了一个模拟intl对象，其中翻译函数只需传递它的参数即可。

感谢您的回复。但是，如果我这样做，我会在单元测试中出错，因为它现在无法解析任何t（“someString”），因为翻译t丢失了。我该怎么办？你需要提供。它看起来像一个函数，所以类似于

t={arg=>arg}

这样你可以给它传递一个字符串，它只返回字符串。或者提前定义一个mock

tMock=jest.fn（t=>t）

然后作为prop

t={tMock}

传递。谢谢。成功了。不过我还有一个问题。为什么默认导出不能与单元测试一起工作？我在这里遇到了以下错误：。有什么方法我可以只使用默认的导出吗？也许这可以帮助解释。谢谢你的回复。但是，如果我这样做，我会在单元测试中出错，因为它现在无法解析任何t（“someString”），因为翻译t丢失了。我该怎么办？你需要提供。它看起来像一个函数，所以类似于

t={arg=>arg}

这样你可以给它传递一个字符串，它只返回字符串。或者提前定义一个mock

tMock=jest.fn（t=>t）

然后作为prop

t={tMock}

传递。谢谢。成功了。不过我还有一个问题。为什么默认导出不能与单元测试一起工作？我在这里遇到了以下错误：。有没有办法只使用默认导出？也许这有助于解释。