酶仍然在 React 中找到应该通过条件渲染隐藏的元素

Enzyme still finding element that should be hidden by conditional rendering in React

我有一个呈现简单计数器的应用程序,我用它来学习 Jest 和 Enzyme。如果用户试图将计数器递减到 0 以下,我希望在那里显示一条错误消息。当用户看到错误并将计数器递增到 0 以上时,我希望隐藏错误消息。当我 运行 应用程序但 Enzyme 似乎保留了 dom 错误消息所在的部分时,这非常有效,即使计数器增加了也是如此。

这是我的 App 组件

function App() {
  const [counter, setCounter] = useState(0)
  const [showError, setShowError] = useState(false)

  const decrementCounter = () => {
    if(counter > 0) {
      setCounter(counter - 1)
    } else {
      setShowError(true)
    }
  }

  const incrementCounter = () => {
    if(showError) {
      setShowError(false)
    }

    setCounter(counter + 1)
  }
  return (
    <div className="App" data-test="component-app">
      <h1 data-test='counter-display'>The counter is <span data-test='count'>{counter}</span></h1>
      {showError ? <h3 style={{color: 'red'}} data-test='below-zero-error-message'>Can not go below 0</h3> : ''}
      <button onClick={incrementCounter} data-test='increment-button'>Increment</button>
      <button onClick={decrementCounter} data-test='decrement-button'>Decrement</button>
    </div>
  );
}

这是我的测试以及其中使用的一些函数

const setup = () => shallow(<App />)
const findByTestAttr = (wrapper, val) => wrapper.find(`[data-test='${val}']`)

test('error message disappears when counter larger than 0', () => {
    const wrapper = setup()
    const decrementButton = findByTestAttr(wrapper, 'decrement-button')
    const incrementButton = findByTestAttr(wrapper, 'increment-button')
    decrementButton.simulate('click')
    let errorMessage = findByTestAttr(wrapper, 'below-zero-error-message')
    expect(errorMessage.length).toBe(1)
    incrementButton.simulate('click')
    errorMessage = findByTestAttr(wrapper, 'below-zero-error-message')
    expect(errorMessage.length).toBe(0)
})

当我 运行 测试时,我得到了这个错误,表明错误消息仍然在 dom 中,即使我增加了计数器。

    expect(received).toBe(expected) // Object.is equality

    Expected: 0
    Received: 1

      85 |     incrementButton.simulate('click')
      86 |     errorMessage = findByTestAttr(wrapper, 'below-zero-error-message')
    > 87 |     expect(errorMessage.length).toBe(0)
         |                                 ^
      88 | })

当我尝试使用 Enzyme 进行调试时,dom 仍然包含错误消息代码,即使计数器明显递增也是如此。

    <div className="App" data-test="component-app">
      <h1 data-test="counter-display">
        The counter is
        <span data-test="count">
          1
        </span>
      </h1>
      <h3 style={{...}} data-test="below-zero-error-message">
        Can not go below 0
      </h3>
      <button onClick={[Function: incrementCounter]} data-test="increment-button">
        Increment
      </button>
      <button onClick={[Function: decrementCounter]} data-test="decrement-button">
        Decrement
      </button>
    </div>

当 运行 运行应用程序并在 Chrome 中观看 dom 时,一旦我将计数器增加到 0 以上,包含错误消息的部分将被删除。

试试这个方法,

const setup = () => shallow(<App />);
const findByTestAttr = (wrapper, val) => wrapper.find(`[data-test='${val}']`);

test('error message disappears when counter larger than 0', () => {
    const wrapper = setup();
    
    //Decrement opration
    const decrementButton = findByTestAttr(wrapper, 'decrement-button');
    decrementButton.simulate('click');
    let errorMessage = findByTestAttr(wrapper, 'below-zero-error-message');
    console.log('Error ==>',wrapper.debug());
    expect(errorMessage.length).toBe(1);

    // Increment Operation
    const incrementButton = findByTestAttr(wrapper, 'increment-button');
    incrementButton.simulate('click');
    console.log('No error ==>',wrapper.debug());
    errorMessage = findByTestAttr(wrapper, 'below-zero-error-message');
    expect(errorMessage.length).toBe(0);
});

如果您遇到任何问题,请告诉我。