在 React 中测试组件方法答案

【问题标题】：Testing component methods in React在 React 中测试组件方法
【发布时间】：2018-02-19 07:43:40
【问题描述】：

我不明白为什么这不起作用...

我正在尝试测试这个功能：

  export class Main extends React.Component {

  handleName = (name) => (value) => {
   const prevState = this.state[name]
   this.setState({ [name]: {...prevState, name: value } })
  }

 render(){
   return(
     //some things
   )
 }
}

我的测试是（在摩卡中）：

it('expects handleName to have been called on change', () => {
  wrapper.find('.teamInput').at(0).simulate('change');
  expect(wrapper.instance().handleName().called).to.equal(true);
});

我认为这是正确的测试方法。我收到一条错误消息：expected undefined to equal true

当我console.log(wrapper.instance().handleName()) 时，它说它是一个函数，所以它知道它在那里......

我之前的每个：

describe('Main Component', () => {
  let wrapper;
  const teamsStub = [];
  const matchesStub = [];
  const submitMatchStub = sinon.spy();
  const syncFirebaseToStoreStub = sinon.spy();
  beforeEach(() => {
    wrapper = mount(
      <Main
        teams={teamsStub}
        matches={matchesStub}
        submitMatch={submitMatchStub}
        syncFirebaseToStore={syncFirebaseToStoreStub}
      />
    )
  })

【问题讨论】：

你在单元测试中渲染过你的组件吗？
handleName 是组件的本地函数，该函数没有间谍。这不是测试代码的正确方法。如果您在更改时调用 submitMatchStub，那么您可以检查是否调用了它。
你应该测试handleChange的行为，所以你应该模拟任何调用它的变化，并检查组件的状态是否已经更新到模拟值，例如：expect(wrapper.state('your name').toEqual('your value') . Also, assuming your render() uses that state change, you should check the rendered value: expect(wrapper .find('#myDiv').text()).toEqual('我的价值'));
干杯@dashton

标签： javascript reactjs testing mocha.js enzyme

【解决方案1】：

expect(wrapper.instance().handleName().called).to.equal(true);

called 方法仅适用于间谍。例如，您将submitMatch 的间谍传递给您的组件。如果您尝试测试使用此方法的任何地方的工作流程，您可以检查该方法是否被调用或没有在传递的间谍上调用called。但是因为handleName 是您组件中的内部方法，所以您无法窥探它。所以以上是无效的。

如果您修改代码以便从外部传递 handleName 方法作为道具。然后在您的单元测试中，您可以为其传递一个 sinon spy 并使用called 对其进行验证。

【讨论】：

啊，我明白了。但我现在希望它在代码中是本地的。那么有没有办法测试组件功能呢？您必须提取它们并将它们作为道具拉入吗？我对这个人有什么不同：github.com/airbnb/enzyme/issues/208?
你可以通过这种方式访问内部方法，但它仍然不是间谍，所以你不能在上面调用called。