State of the Union on Shallow in React Native????

[dschinkel]

It sounds like shallow rendering does not work well with React Native is that so? Or at least for sure not with Redux connect. Here's what we found:

This worked (Straight Component not wrapped in an HOC):

import { SomeComponent } from "../../../src/components/SomeComponent";

  it('shows a profile with name', () => {
    const store = fakeStore({ profile: { name: null }});

    const home = shallow(<SomeComponent store={store} />);
    const name = home.findWhere(node => node.prop('testID') === 'user-name').dive();
    
    expect(name.text()).toBe("Dave");
  });

SomeComponent.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text } from 'react-native';
import { fetchUserProfile } from "../actions/UserProfileActionsCreators";

class SomeComponent extends Component {
  constructor(props){
    super(props);
  }

  async componentDidUpdate(prevProps, prevState, snapshot?): void {
    const { fetchProfile } = this.props;
    await fetchProfile();
}
  render() {
    return <><Text testID="user-name">Dave</Text></>
  }
}

const mapStateToProps = state => ({
  name: state.profile.name
});

const mapDispatchToProps = {
  fetchProfile: fetchUserProfile
};
// without connect wrapper
export { SomeComponent }

This Did Not Work (Redux Connect HOC):

import SomeComponent from "../../../src/components/SomeComponent";

  it('shows a profile with name', () => {
    const store = fakeStore({ profile: { name: null }});

    const home = shallow(<SomeComponent store={store} />);
    const name = home.findWhere(home =>home.text() === "Thelma");
    
    expect(name.text()).toBe("Dave");
  });

Error: Method “text” is meant to be run on 1 node. 0 found instead.

class MyComponent extends Component {
  constructor(props){
    super(props);
  }

  async componentDidUpdate(prevProps, prevState, snapshot?): void {
    const { fetchProfile } = this.props;
    await fetchProfile();
  }
  render() {
    return <><Text testID="user-name">Dave</Text></>
  }
}

const mapStateToProps = state => ({
  name: state.profile.name
});

const mapDispatchToProps = {
  fetchProfile: fetchUserProfile
};

// with connect wrapper
export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent)

Other Observations / Questions:

• Your docs read as though you must have jsdom enabled to shallow but shallow does not use jsdom under the hood:

To use enzyme to test React Native, you currently need to configure an adapter, and load an emulated DOM

• It seemed like shallow rendering wasn't really rendering the react native component because I kept getting a length of 0 on the wrapper.

• Looks like in the latest version of React, we must use .at() on find()?

• Looks like you can't use find() on shallowed components with React Native. I liked it when I could find things via data-test attributes in React Web but you can't do that, you are seemingly stuck with the testID attribute with Native, so when I tried the findAll() with node on testID I was not able to call .text() to get the name out of that .

• and must use findAll with node we can't use find()?

• we already know shallow won't work with React Hooks

[ljharb]

As is hopefully stated in #1436, enzyme has zero official support for React Native until a react-native adapter can be created, by whoever is willing to do the work.

Such an adapter would define "host nodes" as things like Text and Image, as opposed to div and other HTML elements; it would reject HTML elements as invalid, etc.

Closing in favor of #1436.