Closed benwainwright closed 3 years ago
First, I'd suggest not using simulate
- it doesn't actually simulate anything. If you want to invoke the onClick
prop, do so - the native "reset" button behavior can't be triggered.
Separately, no form should ever have a reset button, as it's horrifically bad UX - https://www.nngroup.com/articles/reset-and-cancel-buttons/ may be helpful reading.
@ljharb Thanks for your reply.
Separately, no form should ever have a reset button, as it's horrifically bad UX - https://www.nngroup.com/articles/reset-and-cancel-buttons/ may be helpful reading.
Fair enough, I'll consider that in my design. But it doesn't help me understand why enzyme won't allow me to test for this. I've made some changes to the above CodeSandbox which show that a similar problem exists for the 'submit' behaviour. (link)
If you look at formsubmit.spec.js
, you'll see that when I try to click a submit button (via simulate
or invoke
), the mock that is passed into the onSubmit
handler doesn't record a call, and so the test fails. It seems like in the test, the form event handlers just don't do anything, even though they do on the actual page.
Because enzyme doesn’t build a real DOM - it’s not really a button, it’s a placeholder for one so you can test it.
You don’t need to test the browser itself; that’s not your code.
If you want to test an onSubmit, invoke it directly and explicitly. If you want a fully automated browser test, you’d need to use webdriver, since it’s impossible to truly simulate user activity via JavaScript.
I'm trying to write a test to confirm that a reset button in a form correctly results in the form being reset. The code was originally written using the Grommet component framework, but I've reduced it down to a minimal example using basic DOM elements.
Current behavior
expected: "foobar", received: "hello"
Expected behavior
Your environment
API
Version
The reason there are two different sets of numbers here is because my local project is running on React 17, so I'm using
@wojtekmaj/enzyme-adapter-react-17
to work with Enzyme, but I've also replicated the same issue using a CodeSandbox running React 16.8.3 andenzyme-adapter-react-16
. Link to the CodeSandbox hereIf you look at the CodeSandbox, you can see that the code works. But the Enzyme test doesn't reflect that. Any help appreciated!
Adapter