Enzyme with React -17.0.1 - Method “text” is meant to be run on 1 node. 0 found instead

Question

I am using react-17.0.1 with enzyme 3.3.0 and @wojtekmaj/enzyme-adapter-react-17, so I am getting a lot of error in tests after migrating to react 17. I have a test like this:

describe('JournalNotesListView', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<JournalNotesListView {...props} />);
  });

  describe('render', () => {
    it('should match snapshot', () => {
      expect(wrapper).toMatchSnapshot();
    });

    it('should show `Journal entries are recorded when you add notes or images related to plants in your garden.` when gardenPlantData is empty array or hash', () => {
      const expectedString =
        'Journal entries are recorded when you add notes or images related to plants in your garden.';
      let journalData = {
        data: [],
        meta: {
          otherNotes: []
        }
      };
      wrapper.setProps({ journalData });
      expect(wrapper.find('Text').children().text()).toEqual(expectedString);
      journalData = {
        data: {},
        meta: {
          otherNotes: {}
        }
      };
      wrapper.setProps({ journalData });
      expect(wrapper.find('Text').children().text()).toEqual(expectedString);
    });

Here I am getting an error:

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

      39 |       wrapper.setProps({ journalData });
      40 |       console.log('wrapper', wrapper.find('Text').children());
    > 41 |       expect(wrapper.find('Text').children().text()).toEqual(expectedString);

This the component for which the test is written like this:

const mappedJournalData = () => {
    if (isEmptyArrayOrHash(journalData.data) && isEmptyArrayOrHash(journalData.meta.otherNotes)) {
      return (
        <View style={styles.notFoundContainer}>
          <Text style={styles.notFound}>
            Journal entries are recorded when you add notes or images related to plants in your garden.
          </Text>
        </View>
      );
    }
    // check if garden plant present
    if (!isEmptyArrayOrHash(gardenPlantData.data)) {
      return gardenPlantData.data.map(plant => (
        // show data, grouping by particular plant
        <JournalPlantsGroup plant={plant} journalData={journalData} key={plant.id} />
      ));
    }
  };

export default mappedJournalData;

Answer 1

Enzyme's shallow rendering makes only one-level-deep nodes accessible. Use a .dive() before your .find() or mount the component, instead of shallow rendering.