Question

我正在尝试使用sinon对Reacts useState进行挂钩，但是遇到了问题。

这是我的组件示例：

import React, { useState } from 'react';

function Expand() {
  const [expanded, setExpanded] = useState(null);

  return (
    <div>
      <button onClick={() => setExpanded(true)}>
        Expand
      </button>
    </div>
  );
}

而且我已经尝试过使用Sinon来模拟它。

import * as React from 'react'; 
import {stub} from 'sinon';

const component = mount(<Expand />);
const setExpandedStub = stub();
const setStateStub = stub(React, 'useState').returns([
  null,
  setExpandedStub,
]);

component
  .find('button')
  .prop('onClick')();

t.equals(
  setExpandedStub.args[0],
  true,
  'Should set the state to true.'
);

我遇到的问题是setExpandedStub.args似乎从未返回我期望的结果。相反，它返回[]。我已经注销了挂接调用，它确实在测试中启动，但是我似乎无法弄清楚如何取回用于测试目的的内容。我这样做的原因是因为我似乎无法在酶中调用component.state()，因为它不是类组件。

Answer 1

发生这种情况的原因很难解释。当您存根时，您正在存根对象的方法。因此，当您希望对源代码进行存根处理时，还必须在其中使用存根对象。在这种情况下，您需要调用React.useState，而不是useState的已解构实例。

这应该可以解决您的问题：

import React from 'react';

function Expand() {
  const [expanded, setExpanded] = React.useState(null);

  return (
    <div>
      <button onClick={() => setExpanded(true)}>
        Expand
      </button>
    </div>
  );
}

用Sinon存根React useState

1 个答案: