酶仍然在 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);
});
如果您遇到任何问题,请告诉我。
我有一个呈现简单计数器的应用程序,我用它来学习 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);
});
如果您遇到任何问题,请告诉我。