Errors when using simulate() api about enzyme-adapter-preact-pure HOT 8 CLOSED

@mutoe - You can't get a reference to the DOM node if you use shallow to render the component. This is a limitation that is unfortunately inherited from the way React's shallow rendering works. You need to use the mount function instead.

At work, we combine the advantages of mount rendering (full access to the DOM) with those of shallow rendering (having a unit test that is isolated from the details of its child components) by using a Babel plugin to mock imported components. The React docs recommend doing something conceptually similar with Jest.

from enzyme-adapter-preact-pure.

simulate(...) dispatches a real Event object to the target DOM element using domElement.dispatchEvent(event), so the value of target is set on the event for you and you can't change it. What you can do is get a reference to the DOM node and modify it before dispatching the event using wrapper.find(...).getDOMNode().

This is currently a difference from the React Enzyme adapters which, AFAIK, don't actually dispatch a real event.

Does this answer your question?

from enzyme-adapter-preact-pure.

Well yes, thanks for your time and for the explanation. Maybe it could be worth to add a gotcha on the readme cause the official enzyme documentation suggest another way to handle events.

from enzyme-adapter-preact-pure.

I have added some notes about differences between Enzyme + React and Enzyme + Preact in the README which covers this.

I think in future it may make sense to change the behaviour to match the React adapters, but that would be a breaking change so I have simply documented it for now.

from enzyme-adapter-preact-pure.

I had the same problem.

What should I do when I test functional component like this?

export default function Login() {
  const [ form, setForm ] = useState({ email: '' })

  return (
    <form>
      <input value={form.email} placeholder="Email" onInput={e => setForm({ email: e.currentTarget.value })}>

      <button disabled={!form.email}>Login</button>
    </form>
  )
}

  it('should set button enabled when form is valid', function () {
    const wrapper = shallow(<Login />)
    wrapper.find('[placeholder="Email"]').simulate('input', { currentTarget: { value: '123' } })

    const loginButton = wrapper.find('form button.btn-lg.btn-primary')
    expect(loginButton.props().disabled).toBe(false)
  })

I can't change the internal state if I can't simulate event. Is there anything wrong with me? @robertknight @ingro

from enzyme-adapter-preact-pure.

I might add, when I try to use

wrapper.find('[placeholder="Email"]').getDOMNode<HTMLInputElement>().value = '123'

I got an error TypeError: wrapper.find(...).getDOMNode is not a function

from enzyme-adapter-preact-pure.

@robertknight Thanks for your answer, mount solved my problem. I will try to use plugins to optimize my tests as you suggest later.

By the way, can getDOMNode be removed from the shallow wrapper in TS ?

from enzyme-adapter-preact-pure.

@robertknight I made a small patch which provides an opportunity to pass {target} to simulate() as the second argument. It is a bit hacky but works. What do you think about it?

from enzyme-adapter-preact-pure.