TypeError: this._touchableNode.addEventListener is not a function

[jribeiro]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When running Jest snapshots on a Button component imported from React Native and using react-native-web/babel or aliasing through webpack, an exception is thrown:

TypeError: this._touchableNode.addEventListener is not a function

      at Object.componentDidMount (node_modules/react-native-web/dist/components/Touchable/Touchable.js:1:5432)
      at Object.<anonymous> (index.test.js:8:1)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

The error seems to come from this line:
https://github.com/necolas/react-native-web/blob/master/src/components/Touchable/Touchable.js#L332

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

1. Follow Getting started guide for webpack and Jest
2. Create a dummy component with uses React Native Button

import React from 'react';

import { Button } from 'react-native';

export default () => (
	<Button><Text>Hello World</Text></Button>
);

3. Write a Snapshot against the component

it('renders correctly', () => {
  const tree = renderer
    .create(<HelloWorldButton />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

What is the expected behavior?
Snapshot should be created

Environment (include versions). Did this work in previous versions?

• OS: MacOS
• Device: n/a
• Browser: n/a
• React Native for Web (version): 0.1.14
• React (version): 16.1.1

I've created a demo repo showcasing the issue
https://github.com/jribeiro/react-native-web-touchable-demo

[necolas]

You probably need to configure jest to run with jsdom. See https://github.com/necolas/react-native-web/blob/master/package.json

[toboid]

@necolas i'm seeing this too. Could you re-open the issue? Or shall I create a new one?

I took the demo from @jribeiro and added jest config as per the RNW config - https://github.com/toboid/react-native-web-touchable-demo/blob/master/jest.json

I'm still seeing the issue and I'm seeing it in the project I work on too.

[necolas]

The root cause of the issue looks to be that ReactDOM.findDOMNode doesn't work with react-test-renderer: facebook/react#7371. The problem isn't present if you use enzyme though.

I'll wrap that code in a guard to avoid the error getting thrown.

[toboid]

OK great, I'd be happy to be create a PR if you like?

[necolas]

No worries, should already be fixed in master. Thanks for following up on this issue and helping me to understand what the issue was