callstack / react-native-testing-library

🦉 Simple and complete React Native testing utilities that encourage good testing practices.
https://callstack.github.io/react-native-testing-library/
MIT License
3.01k stars 264 forks source link

`persist` method does not exist on event passed to onKeyPress #1588

Closed trcoffman closed 2 months ago

trcoffman commented 2 months ago

Describe the bug

When using userEvent, the event passed to the onKeyPress callback of a TextInput has no persist method, when it does have this method in a real react-native runtime. This is causing errors when using Gluestack's Input component with react-native-testing-library.

TypeError: e.persist is not a function

  at persist (../../node_modules/@gluestack-ui/input/src/Input.tsx:92:15)
  at apply (../../node_modules/@testing-library/react-native/src/user-event/utils/dispatch-event.ts:19:12)
  at callback (../../node_modules/@testing-library/react-native/src/act.ts:31:24)
  at callback (../../node_modules/react/cjs/react.development.js:2512:16)
  at actImplementation (../../node_modules/@testing-library/react-native/src/act.ts:30:25)
  at dispatchEvent (../../node_modules/@testing-library/react-native/src/user-event/utils/dispatch-event.ts:18:11)
  at ../../node_modules/@testing-library/react-native/src/user-event/type/type.ts:77:16
  at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
  at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)

Expected behavior

persist method should exist on the event object so that code that works fine in react-native works in react-native-testing-library.

Steps to Reproduce

Use @gluestack-ui/input with react-native-testing-library and use userEvent.type to enter text into it.

Screenshots

Versions

@testing-library/react-native version 12.4.4 @gluestack-ui/input version 0.1.26

mdjastrzebski commented 2 months ago

@trcoffman we could add a simple no-op method: ``perisist: () => {}. Would that solve Gluestack issue?

I've done some cursory search on pesist and it seems like it's no longer used:

Note: As of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled. Source: https://legacy.reactjs.org/docs/events.html

We're on React v18 for some time now, so looks like gluestack might be calling this method unnecessarily.

trcoffman commented 2 months ago

@mdjastrzebski , Thanks for the quick reply. It looks like it's still relevant for react-native:

https://react.dev/reference/react-dom/components/common#react-event-object-methods

persist(): Not used with React DOM. With React Native, call this to read event’s properties after the event.

I think that a simple no-op method persist on all synthetic events generated by react-native-testing-library would make a lot of sense.

mdjastrzebski commented 2 months ago

That's interesting, thanks for linking the material.