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

Question

我有一个可以呈现简单计数器的应用程序，我用它来学习 Jest 和 Enzyme。我希望如果用户尝试将计数器减少到 0 以下，则显示错误消息。当用户看到错误并将计数器增加到 0 以上时，我希望隐藏错误消息。当我运行应用程序时，这工作得很好，但 Enzyme 似乎保留了错误消息所在的 dom 部分，即使计数器增加了。

这是我的应用程序组件

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)

})

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

Answer 1

试试这个方法，const setup = () => shallow(<App />);const findByTestAttr = (wrapper, val) => wrapper.find(`[data-test='${val}']`);test('error message disappears when counter larger than 0', () => {&nbsp; &nbsp; const wrapper = setup();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //Decrement opration&nbsp; &nbsp; const decrementButton = findByTestAttr(wrapper, 'decrement-button');&nbsp; &nbsp; decrementButton.simulate('click');&nbsp; &nbsp; let errorMessage = findByTestAttr(wrapper, 'below-zero-error-message');&nbsp; &nbsp; console.log('Error ==>',wrapper.debug());&nbsp; &nbsp; expect(errorMessage.length).toBe(1);&nbsp; &nbsp; // Increment Operation&nbsp; &nbsp; const incrementButton = findByTestAttr(wrapper, 'increment-button');&nbsp; &nbsp; incrementButton.simulate('click');&nbsp; &nbsp; console.log('No error ==>',wrapper.debug());&nbsp; &nbsp; errorMessage = findByTestAttr(wrapper, 'below-zero-error-message');&nbsp; &nbsp; expect(errorMessage.length).toBe(0);});如果您遇到任何问题，请告诉我。