Question

我要跟tdd打个招呼。我想调用事件byText，但我无法执行此操作，因为我在组件中收到此错误。

TypeError: Cannot read property 'getByText' of undefined

这是我的组件：

const createSubject = props => {
    render(
      <AnnoucementItem
        {...defaultProps}
        {...props}
      />
    );
  };

这是我的测试文件：

import React from 'react';
import { render, fireEvent } from 'react-native-testing-library';
import Enzyme, { shallow } from 'enzyme';
import { useDispatch } from 'react-redux';

import i18n from '../../../../src/i18n';
import AnnoucementItem from '../../../../src/screens/Profile/AnnouncementList/AnnouncementItem';

jest.mock('react-redux');

let { onEdit, toggleVisibility, onDelete } = jest.fn();

describe('<AnnoucementItem />', () => {

  const defaultProps = {
    navigation: {},
    item: {
      id: 'annoucement id',
      user_id: 'id do usuario',
      is_published: true,
      images: {
        0: {
          secure_url: genericurl',
        },
      },
      address: {
        city: 'Pelotas',
        state: 'RS',
        number: '990',
        street: 'Rua Doutor Francisco Ferreira Veloso',
        neighbourhood: 'Py Crespo',
      },
      values: {
        other: '4.32',
        total: '4422.33',
      },
      positive_ratings: '2',
      negative_ratings: '1',
      onEdit: onEdit,
      toggleVisibility: toggleVisibility,
      onDelete: onDelete,
    },
    toggleVisibility: () => {},
    onDelete: () => {},
    onEdit: () => {},
    numberOfLikes: 3,
    SwitchOption: {
      switchValue: false,
    },

    userId: () => {},
    isFetching: () => {},
    shouldUpdate: () => {},
    userAnnouncements: () => {},
    formVisibility: () => {},
    error: () => {},

    fetchUserAnnouncements: () => {},
    deleteAnnouncement: () => {},
    fillFormAnnouncement: () => {},
    changeAnnouncementVisibility: () => {},
  };

  const createSubject = props => {
    render(
      <AnnoucementItem
        {...defaultProps}
        {...props}
      />
    );
  };

  describe('AnnoucementItem component', () => {
    it('should delete annoucement', () => {
      const { getByText, getByTextId } = createSubject();

      fireEvent.CallDelete(getByTextId('DeleteButton'),  'deleteAnnouncement');
      fireEvent.press(getByText(i18n.t('profile.announcementList.announcementItem.deleteAnnouncementAlert')));

      const {
        requestDeleteAnnouncement,
        successDeleteAnnouncement,
        announcementId,
      } = jest.fn();

      useDispatch.mockReturnValue(
        requestDeleteAnnouncement,
        successDeleteAnnouncement,
        announcementId);

      expect(AnnoucementItem.prototype.onDelete.calledOnce).toBe(true);

      expect(requestDeleteAnnouncement).toHaveBeenCalledWith({
        actionTypes: 'REQUEST_DELETE_ANNOUNCEMENT',
      });
      expect(successDeleteAnnouncement).toHaveBeenCalledWith({
        actionTypes: 'SUCCESS_DELETE_ANNOUNCEMENT',
        dispatch: { deletedId: announcementId },
      });
    });
  });

  it('should go to edit annoucement', () => {
    const { getByText, getByTextId } = createSubject();

    fireEvent.CallEdit(getByTextId('EditButton'),  'EditAnnouncement');
    fireEvent.press(getByText(i18n.t('profile.announcementList.announcementItem.editAnnouncement')));

    const editAnnouncement = jest.fn();
    const navigation = { navigate: jest.fn() };

    useDispatch.mockReturnValue(editAnnouncement);
    expect(editAnnouncement).toHaveBeenCalledWith({
      navigation: { navigation },
    });
  });

  it('should count interested peoples in my annoucement', () => {
    const { getByText, item } = createSubject();

    const interested = getByText(item.positive_ratings + item.negative_ratings);

    expect(interested).toBeTruthy();
  });

  it('should switch visibleAnnoucement', () => {

  });
});

问题是，如何获取元素ByText？

Answer 1

在您的测试更新中

const createSubject = props => {
    render(
      <AnnoucementItem
        {...defaultProps}
        {...props}
      />
    );
  };

到

const createSubject = props => {
    return render(
      <AnnoucementItem
        {...defaultProps}
        {...props}
      />
    );
  };

由于createSubject是一个函数，因此您需要从该函数返回一些东西才能使用其输出。

React Native JEST TDD-无法读取未定义的属性“ getByText”

1 个答案: