Question

我无法理解为什么这不起作用......

我正在尝试测试此功能：

  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())它说它是一个函数时，它知道它就在那里......

my beforeEach：

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}
      />
    )
  })

Answer 1

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

called方法仅适用于间谍。例如，您正在将submitMatch的间谍传递给您的组件。如果您尝试测试使用此方法的任何位置的工作流程，您可以检查是否已调用该方法，而不是在传递的间谍上调用called。但是因为handleName是组件中的内部方法，所以你不能窥探它。所以上述内容无效。

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

在React中测试组件方法

1 个答案: