如何检查计数器值是否增加或没有反应？

Question

我做了一个简单的计数器演示，我有两个按钮 increment 和 decrement.demo 工作正常。但现在我想测试我的组件。当我点击increment button 时，我的测试用例失败。我正在使用enzyme 和jest。

这是我的代码 https://codesandbox.io/s/quirky-tharp-ty92o?file=/src/App.test.js

测试用例失败

test("clicking button increments counter display", () => {
  const counter = 7;
  const wrapper = setup(null, { counter });

  // find button and click
  const button = findByTestAttr(wrapper, "increment-button");
  button.simulate("click");

  // find display and test value
  const counterDisplay = findByTestAttr(wrapper, "counter-display");
  expect(counterDisplay.text()).toContain(counter + 1);
});

遇到错误

ShallowWrapper::setState() 只能在类组件上调用

Answer 1

您无法操纵功能组件的内部状态，尤其是基于类的this.setState。

0 是计数器的初始默认状态，因此您只需测试单击“+”按钮将 UI 更新为 1。

const setup = (props = {}, state = null) => {
  const wrapper = shallow(<App {...props} />);
  // if (state) wrapper.setState(state); // <-- can't do this!!
  return wrapper;
};

...

test("clicking button increments counter display", () => {
  const wrapper = setup(); // initial count is 0

  // find button and click
  const button = findByTestAttr(wrapper, "increment-button");
  button.simulate("click");

  // find display and test value
  const counterDisplay = findByTestAttr(wrapper, "counter-display");
  expect(counterDisplay.text()).toContain(1); // new count is 1
});

更新以提供初始道具

暴露一些初始值 prop 传递给钩子

export default function App({ initialCount }) {
  const { state, increment, decrement } = useCounter(initialCount);
  return (
    <div className="App" data-test="component-app">
      <h1 data-test="counter-display">{state}</h1>
      <button data-test="increment-button" onClick={increment}>
        +
      </button>
      <button data-test="decrement-button" onClick={decrement}>
        -
      </button>
    </div>
  );
}

更新钩子以将初始值传递给状态（正确使用功能状态更新！！）

export default (initialCount) => {
  const [state, setState] = React.useState(initialCount);

  const increment = () => {
    setState(preState => preState + 1);
  };

  const decrement = () => {
    setState(preState => preState - 1);
  };

  return {
    state,
    increment,
    decrement
  };
};

并更新测试套件

const setup = (props = {}) => {
  const wrapper = shallow(<App {...props} />);
  return wrapper;
};

...

test("clicking button increments counter display", () => {
  const initialCount = 10;
  const wrapper = setup({ initialCount });

  // find button and click
  const button = findByTestAttr(wrapper, "increment-button");
  button.simulate("click");

  // find display and test value
  const counterDisplay = findByTestAttr(wrapper, "counter-display");
  expect(counterDisplay.text()).toContain(initialCount + 1);
});

建议：考虑切换到 React 测试库，它实际上更直观，并以用户与其交互的方式测试组件，而不是干预内部实现细节，本质上更像是您上次测试的工作方式。