酶仍然在 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', () => {

    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);

});

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