Модульное тестирование в React с использованием TypeScript, Jest и Enzyme: невозможно вызвать объект, который, возможно, является «неопределенным»

Question

Я создаю приложение React Native с помощью TypeScript.Я делаю свои тесты компонентов, используя Jest и Enzyme.Я также использую React Navigation

В моем последнем вопросе Брайан объяснил мне, как правильно проверить нажатие кнопки.Моя проблема в том, что кнопки onPress prop могут быть неопределенными.Позвольте мне показать вам код:

export class HomeScreen extends Component<Props, object> {
  // ... navigationOptions and stuff

  handlePress = () => {
    this.props.navigation.navigate("QuestionsScreen");
  };

  render() {
    return (
      <View style={styles.container}>
        <Button
          raised={true}
          title={strings.painButtonTitle}
          buttonStyle={styles.painButton}
          titleStyle={styles.title}
          onPress={this.handlePress}
        />
      </View>
    );
  }
}

А вот тест, который я пишу для проверки взаимодействия с кнопкой:

describe("interaction", () => {
  const props = createTestProps({});
  const wrapper = shallow<HomeScreen>(<HomeScreen {...props} />);

  describe("clicking the Pain Button", () => {
    it("should navigate to the 'QuestionsScreen'", () => {
      wrapper.instance().handlePress = jest.fn();
      wrapper.find(Button).prop("onPress")({} as any);

      expect(wrapper.instance().handlePress).toHaveBeenCalledTimes(1);
    });
  });
});

Проблема в том, что мой тест не будетзапустить, потому что линтер говорит, что onPress может быть неопределенным:

Cannot invoke an object which is possibly 'undefined'.

Как я могу это исправить?

Я попытался обернуть свой код в оператор if, подобный этому:

if (typeof wrapper.find(Button).prop("onPress") !== undefined) {
  wrapper.find(Button).prop("onPress")({} as any);
}

Но это тоже не работает.

Answer 1

Вы можете использовать ненулевой оператор утверждения , например, так:

wrapper.find(Button).prop("onPress")!({} as any);

... или назначить обработчик переменной и вызвать его за защитником следующим образом:

const handler = wrapper.find(Button).prop("onPress");
if (handler) {
  handler({} as any);
}