从 React 类中导出默认类和函数答案

【问题标题】：Export default class and function from a React class从 React 类中导出默认类和函数
【发布时间】：2019-04-10 10:15:53
【问题描述】：

我可以从 React 类中同时导出一个类和一个函数吗？下面是我的课程，我正在尝试导出 onKeyHandler 以对其进行单元测试。我尝试在 onKeyHandler 之前添加导出，但我的 linter 不喜欢这样。我将如何将一个作为默认值导出，另一个作为要测试的函数导出。

import React, { Component } from 'react';

class MyComponent extends Component {

  onKeyHandler = ({ target, keyCode }) => {

  };

  render() {
    return (
      <div>
        sdfsdfds
      </div>
    );
  }
}

export default MyComponent;

【问题讨论】：

为什么要对事件处理程序进行单元测试？在您的测试中渲染组件并模拟一些事件并查看组件是否做出相应响应不是更好吗？
如果您将事件处理程序作为类的一部分进行测试，则导入整个类并对类方法进行单元测试，即MyComponent.onKeyHandler。如果这不合适，那么不要将该方法作为类的一部分并单独导出它们。

标签： javascript reactjs ecmascript-6 jestjs

【解决方案1】：

要导出一个函数，它必须在类之外。但是您可以在不导出的情况下对其进行测试。

用sinon试试这个

// import
import 'sinon' from sinon.

// in your test case
let onKeySpy = sinon.spy(MyComponent, "onKeyHandler");

// logic goes here
expect(onKeySpy.called).toBeTrue();

我还没有尝试过，但这应该可以。您也可以使用jest.spyOn() 以类似的方式进行间谍活动。

如果需要stub方法，可以使用prototype

let onKeyStub = sinon.stub(MyComponent.prototype, "onKeyHandler");

【讨论】：

什么是 sinon.stub(MyComponent.prototype, "onKeyHandler");做？我希望能够根据触发的键来测试键处理程序中的多个 if 语句？
MyComponent.prototype 也显示为 {} onKeyHandler 未定义。
你必须在你的测试之上导入它
在测试类的顶部导入。
Stunning 是一种常见的测试策略。它用于改变方法的行为。例如，你可以存根方法，当它被执行时，你可以要求方法返回特定的值。