Any possibility of using this for react native project?

[amay]

I really appreciate the guiding principles behind this library, have felt some of the pain associated with the drawbacks you all have identified with enzyme, and I'm curious how much work would be involved to get this library to work for a react native project? Given the reliance on DOM testing, I'm guessing it might not be possible or a good idea. Any guidance is greatly appreciated.

[kentcdodds]

Hi @amay!

I'd love react native support, but I have no idea how hard that would be... I know very little about react native. I'm pretty sure the only way to make this work is if you could render react-native components to the DOM. I'm not sure whether there's anything out there which makes this possible though...

I'd love to look at a PR for it so long as it doesn't make this library more complex to use or over-complicate the implementation. Anyone can feel free to investigate this 😄

[amay]

Hey @kentcdodds, I had some luck getting this working with some (admittedly nasty) hacking. I will post here in case it is helpful to anyone else:

// in setupTests.js which is configured as jest's setup file.
// Adapted from https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/ and
// https://stackoverflow.com/questions/42039383/how-to-use-enzyme-for-react-native-with-jest

import { JSDOM } from 'jsdom'
// used to fully render native components as react components
import 'react-native-mock-render/mock'

// copy props needed to render HTML from JSDOM window to node's global object
function copyProps(src, target) {
  Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .forEach(prop => {
      // eslint-disable-next-line no-param-reassign
      target[prop] = src[prop]
    })
}

const { window } = new JSDOM()

global.window = window
global.document = window.document
global.navigator = {
  userAgent: 'node.js',
}
copyProps(window, global)

// react doesn't like some of the props that are set on native components (that eventually are set on DOM nodes, so suppress those warnings
const suppressedErrors = /(React does not recognize the.*prop on a DOM element|Unknown event handler property|is using uppercase HTML|Received `true` for a non-boolean attribute `accessible`|The tag.*is unrecognized in this browser)/
// eslint-disable-next-line no-console
const realConsoleError = console.error
// eslint-disable-next-line no-console
console.error = message => {
  if (message.match(suppressedErrors)) {
    return
  }
  realConsoleError(message)
}

With this, I can get a test like the following to pass in jest:

import React from 'react'
import { StyleSheet, Text, TouchableHighlight } from 'react-native'
import PropTypes from 'prop-types'
import { render, Simulate } from 'react-testing-library'

const Button = ({ onPress, text }) => (
  <TouchableHighlight onPress={onPress}>
    <Text>{text}</Text>
  </TouchableHighlight>
)

test('renders text', () => {
  const { getByText } = render(<Button text="Test Button" />)

  expect(getByText('Test Button').textContent).toBe('Test Button')
})

However, I can't get calls to Simulat to work because press is not a supported event type in react-dom:

test('invokes onPress prop on press', () => {
  const onPress = jest.fn()
  const { container } = render(<Button onPress={onPress} />)

  Simulate.press(container) // throws error
  // Simulate.click(container) doesn't work because it doesn't trigger press event

  expect(onPress).toHaveBeenCalled()
})

So far I haven't been able to think of any way to extend react-dom/test-utils to send the press event.

[kentcdodds]

Awesome!

I'm pretty sure that you shouldn't have to do the JSDOM stuff because jest will handle that all by default anyway (perhaps in your tests you're specifying a different testEnvironment which is why that's not working).

The console.error stuff is fine but probably not something I want to include in the library, but we could point to an example or some other lib which handles this.

Also the import 'react-native-mock-render/mock' is something I think I don't want included in the library and would rather have that be something you have to do yourself.

As for the simulate stuff, I'm not sure what the code would entail, but you should be able to simply: Object.assign(Simulate, customEventSimulators).

Now that I think about it though, there's not a whole lot that I want to include in the library itself... Perhaps we could just have some examples of the setup you'd need to do to support React Native 🤔

[kentcdodds]

At the very least, I'd like to have people doing things in the wild before we decide on including anything into the core so we have time to decide what works best.

[amay]

Thanks for the tip on testEnvironment. It was being set to node which is why the JSDOM stuff didn't work.

After doing the research into what was needed to get this working, I definitely agree that it doesn't make sense to try to incorporate these changes as this package is really about DOM testing.

I did end up getting Simulate.press to work w/ again some trickery. I'll post it here in case a future dev wants to go down this road, but I'm okay if you want to close out this issue for now.

Here is the final setupTests.js file for setting up jest to work with this test lib:

import 'react-native-mock-render/mock'
import { Simulate } from 'react-dom/test-utils'

function suppressDomErrors() {
  const suppressedErrors = /(React does not recognize the.*prop on a DOM element|Unknown event handler property|is using uppercase HTML|Received `true` for a non-boolean attribute `accessible`|The tag.*is unrecognized in this browser)/
  // eslint-disable-next-line no-console
  const realConsoleError = console.error
  // eslint-disable-next-line no-console
  console.error = message => {
    if (message.match(suppressedErrors)) {
      return
    }
    realConsoleError(message)
  }
}

function setupSimulatePress() {
  Simulate.press = Simulate.click

  jest.mock('TouchableHighlight', () => {
    // eslint-disable-next-line global-require
    const React = require('react')
    const RealComponent = require.requireActual('TouchableHighlight')
    const TouchableHighlight = props =>
      React.createElement(
        'TouchableHighlight',
        {
          ...props,
          onClick: props.onPress,
        },
        props.children
      )
    TouchableHighlight.propTypes = RealComponent.propTypes
    return TouchableHighlight
  })
}

suppressDomErrors()
setupSimulatePress()

[kentcdodds]

I think that code would make a handy package by itself. I definitely would love to reduce friction for folks testing with React Native, I'm just not 100% certain I want to commit to building-in a RN implementation at the moment. Would you be interested in making your code a package then make a PR to this repo to show how to integrate it?

[kentcdodds]

I just noticed that code says: React.createElement('TouchableHighlight', ... but I think it should probably say: React.createElement(RealComponent, ...

[amay]

Hey @kentcdodds I agree with your proposal that this functionality not be included in this simple core library. I'm dogfooding my approach on a project right now, and if it goes well, I'm definitely interested in adding a simple package to simplify the test setup for react native projects. I'll post back here when I've made progress, but I'll close this out for now.

[kentcdodds]

Super. Thanks @amay! I can't wait to see the package if it turns up on npm :) I'd love to link to it in the README here :)

[kentcdodds]

Hey @amay! Folks are curious to hear how your experiment went! Is this something that'll work for react native?

[hnordt]

@kentcdodds @amay any news on this topic? Thanks!