"Cannot read property 'target' of undefined" with fireEvent.press()

Ask your question

During a test that I’ve made over one of my component, I wanted to ‘click’ on a Button . This button worked perfectly out of the test. But wen the button is trigger by fireEvent.press() it seems to not recognise the event and so the target of it.

I’m a beginner in testing and moreover in react-native tests so it’s quite possible that this issue is due to me. But if someone got an idea it would be very appreciable 👍

The Button

<Button
  testID="mainButton"
  title="Découvrir les offres"
  style={defaultStyles.p3_actions}
  color="#000A24"
  onPress={(e) => {
    Linking.openURL(data.config.subscription_url);
    onSubscribeClick(
      widget,
      e.target,
      data.config.subscription_url
    );
  }}
/>

The Test

it('should render without issues', () => {

    const { getByTestId } = render(
      <PaywallContext onSubscribeClick={(a, b, c) => {}} >
        <SubscriptionWidget { ... widgetProps }/>
      </PaywallContext>
    );

    const element = getByTestId('widgetView');
    const mainButton = getByTestId('mainButton');
    fireEvent.press(mainButton);
    expect(element).toBeDefined();
  });

The Issue

<SubscriptionWidget /> › should render without issues

    TypeError: Cannot read property 'target' of undefined

      37 |           onSubscribeClick(
      38 |             widget,
    > 39 |             e.target,
         |               ^
      40 |             data.config.subscription_url
      41 |           );
      42 |         }}

      at onPress (src/paywall/components/SubscriptionWidget.js:39:15)
      at node_modules/react-native-testing-library/build/fireEvent.js:40:26
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12463:12)
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15367:14)
      at invokeEvent (node_modules/react-native-testing-library/build/fireEvent.js:39:3)
      at Function.press (node_modules/react-native-testing-library/build/fireEvent.js:47:33)
      at Object.<anonymous> (tests/widgets/subscriptionWidget.test.js:38:15)

[mdjastrzebski]

I’ve done a sample test how does onPress work.

In running RN app the onPress handler receives event with event.target being a number.

In RNTL test onPress handler receives undefined event. Which is technically correct according to flow types for RN Button component.

@defless How do you use this value event.target? If for identifying button, then maybe you could use closure to capture some button identifier in event handler.

[mdjastrzebski]

Just to clarify by what I mean by passing button identifier in closure:

onPress={() => { // <-- here: could remove unused 'e' parameter
          Linking.openURL(data.config.subscription_url);
          onSubscribeClick(
            widget,
           "button 1", // <-- here: used string identifier instead of 'e.target':
            data.config.subscription_url
          );
        }}