带有 React -17.0.1 的酶 - 方法“文本”旨在在 1 个节点上运行。找到了 0 个

Question

我正在使用带有酶 3.3.0 和 @wojtekmaj/enzyme-adapter-react-17 的 react-17.0.1，因此在迁移到 react 17 后，我在测试中遇到了很多错误。我有一个这样的测试：

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);
    });

这里出现错误：

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);

这是编写测试的组件，如下所示：

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 的shallow 渲染使只有一层深的节点可访问。在.find() 或mount 组件之前使用.dive()，而不是shallow 渲染。