React-native-testing-library: fireEvent Cannot read property 'charAt' of undefined

[sammysium]

Ask your Question

I doubt it is a bug but I have a Picker component and I am the following, trying to fire onValueChange:

const onEventMock = jest.fn();
const {getByTestId} = render();

const picker = getByTestId('TID_Language_Selector');

fireEvent(picker, 'onValueChange', 'ab');
expect(onEventMock).toHaveBeenCalledWith('ab');

It fails with fireEvent Cannot read property 'charAt' of undefined

I already tried fireEvent.onChange(picker) but it has no effect. How can I stimulate onValueChange event?

[thymikee]

What is Picker? Please provide as much detail as possible, libs used, their versions etc

[sammysium]

@thymikee sorry. I have solved it. Sorry I didn't update this ticket.

[thymikee]

Would be lovely to post the steps to solve it if someone stumps upon a similar problem :)

[i-mighty]

Could this issue be opened again?
I'm having a similar issue for fireEvent(button, 'press')
button is a TestInstance for a NativeBase Button

[thymikee]

@i-mighty please provide a repro we can download. Once triaged, I'd be happy to reopen and we can work on a fix :)

[nise2]

Hi, same problem there. I am trying to implement the react-native-picker with react-native-testing-library latest version (v5.0.3).

The implementation have changed from my latest version of react-native-testing-library (v.1.13.2).

Here is a working example with _press_ event on a Button component :
Old version : fireEvent(myButton, 'press');
New version : fireEvent.press(myButton);

The problem now, is that this is not working with the _valueChange_ event on a Picker component.
Old version (working): fireEvent(pickerComponent, valueChange, 'myValue');
But with the new version, it fails with : "Cannot read property 'charAt' of undefined"

I tried :

• fireEvent.change(pickerComponent, {target: {value: 'myValue'}});
• fireEvent.valueChange(pickerComponent, 'myValue');

How I can make it work with the new implementation ? Here is the doc : https://www.native-testing-library.com/docs/api-events

Could you share with us your solution please @sammysium ?

[sammysium]

Hey,

I got it to work by:

fireEvent(getByTestId('TID_Language_Selector'), 'valueChange', 'en_US');

where

TID_Language_Selector is the picker testID
en_US is the JSON language file

On Sat, May 23, 2020 at 9:54 AM nise2 [e-mail] wrote:

Hi, same problem there. I am trying to implement the react-native-picker
https://github.com/react-native-community/react-native-picker with
react-native-testing-library
https://www.npmjs.com/package/@testing-library/react-native latest
version (v5.0.3).

The implementation have changed from my latest version of
react-native-testing-library (v.1.13.2).

Here is a working example with press event on a Button component :
Old version : fireEvent(myButton, 'press');
New version : fireEvent.press(myButton);

The problem now, is that this is not working with the valueChange event
on a Picker component.
I tried :

• fireEvent.change(pickerComponent, {target: {value: 'myValue'}});
• fireEvent.valueChange(pickerComponent, 'myValue');
• fireEvent(pickerComponent, valueChange, 'myValue'); (which failed
  with "Cannot read property 'charAt' of undefined`

How I can make it work with the new implementation ? Here is the doc :
https://www.native-testing-library.com/docs/api-events

Could you share with us your solution please @sammysium
https://github.com/sammysium ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/callstack/react-native-testing-library/issues/289#issuecomment-633093825,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALF7AKH2PAEVELLDHIICO2DRS75UJANCNFSM4MRROSLQ
.

--
Regards,

Sium
One Acre Fund | Farmers First

[nise2]

@sammysium Well thanks for your answer, unfortunately it still fails with the same error. Here is my code (with the declaration of pickerComponent) :

const pickerComponent = getByTestId('myPickerComponentTestId');
fireEvent(pickerComponent, 'valueChange', 'myValue')

Which version of react-testing-library are you using ?

[sammysium]

I am using

"@react-native-community/picker": "^1.3.0",
Can you post the full code of your component with the picker?

On Sat, May 23, 2020 at 10:17 AM nise2 [e-mail] wrote:

@sammysium https://github.com/sammysium Well thanks for your answer,
unfortunately it still fails with the same error. Here is my code (with
myComponent showed) :

const myComponent = getByTestId('myPickerComponentId');
fireEvent(myComponent, 'valueChange', 'myValue')

Which version of react-testing-library are you using ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/callstack/react-native-testing-library/issues/289#issuecomment-633098828,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALF7AKCMZIYWTEHHOHWWXLTRTAAJNANCNFSM4MRROSLQ
.

--
Regards,

Sium
One Acre Fund | Farmers First

[sammysium]

sorry:

"react-native-testing-library": "^1.13.2",

On Sat, May 23, 2020 at 10:20 AM Sium Kiflemariam <
[email protected]> wrote:

I am using

"@react-native-community/picker": "^1.3.0",
Can you post the full code of your component with the picker?

On Sat, May 23, 2020 at 10:17 AM nise2 [e-mail] wrote:

@sammysium https://github.com/sammysium Well thanks for your answer,
unfortunately it still fails with the same error. Here is my code (with
myComponent showed) :

const myComponent = getByTestId('myPickerComponentId');
fireEvent(myComponent, 'valueChange', 'myValue')

Which version of react-testing-library are you using ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/callstack/react-native-testing-library/issues/289#issuecomment-633098828,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALF7AKCMZIYWTEHHOHWWXLTRTAAJNANCNFSM4MRROSLQ
.

--
Regards,

Sium
One Acre Fund | Farmers First

--
Regards,

Sium
One Acre Fund | Farmers First

[nise2]

Actually I just found out I mixed up the two libraries...

I asked on your feed (concerning react-native-testing-library) instead of https://github.com/testing-library/native-testing-library. My bad... Yup, this is working fine as expected with this current library.

Thanks !

[andres-pino]

I had the same error but it was a fool mistake for me, I was trying to press a button element like this:
fireEvent(buttonElement)
But I missed to use the press function in the fireEvent object, so the solution was
fireEvent.press(buttonElement)