Question

我正在使用Jest和react-test-renderer（不是酶）进行测试，但是我似乎无法正确测试我想做的事情。

在“忘记密码”组件中，我想要：

测试TitleLargeWithHeader的标题是否为“忘记了” 密码”。我给了它testId="title"，但不确定如何查询该ID。
使用text测试testId="subtitle"组件呈现“将向您的帐户电子邮件发送一封电子邮件，以重置您的密码。”我也不确定如何查询该ID。

有人可以向我指出正确的方向吗？或者我错过了什么？

ForgotPassword.js

<SafeAreaView style={styles.container} behavior="padding">
  <TitleLargeWithHeader title="Forgot Password" testId="title" />

  <View style={styles.subtitleContainer}>
    <Text style={styles.subtitleText} testId="subtitle">An email will be sent to your account email to reset your password.</Text>
  </View>

  <KeyboardAwareScrollView>
    <View style={styles.form}>
      <TextInputField
        value={email}
        onChangeText={(text) => setEmail(text)}
        title={'Email'}
        autoCorrect={true}
        keyboardType="email-address"
        returnKeyType="done"
        onSubmitEditing={sendEmail}
        autoCapitalize={"none"}
      />
    </View>

    <ButtonLarge
      label={'Send Email'}
      onPress={sendEmail}
      disabled={!email}
    />
  </KeyboardAwareScrollView>
</SafeAreaView>

ForgotPassword.test.js

// Imports: Dependencies
import 'react-native';
import React from 'react';
// Note: Test Renderer Must Be Required After React-Native
import { create } from 'react-test-renderer';
import ShallowRenderer from 'react-test-renderer/shallow'; // ES6

// Imports Screens
import ForgotPassword from './ForgotPassword';

// Imports: Components
import TitleLargeWithHeader from '../../components/TitleLargeWithHeader';

// Test: Forgot Password
describe('Screen: Forgot Password', () => {
  // Title Renders
  it('Title renders', () => {
    const component = create(<ForgotPassword />);
    const testInstance = component.root;

    // expect(testInstance.findByProps({title: 'Forgot Password'}).children).toEqual(['Forgot Password']);


  });

  // Subtitle Renders
  it('Subtitle renders', () => {
    const component = create(<ForgotPassword />);
    const testInstance = component.root;

    // expect(testInstance.findByProps({ testId: "subtitle"}).children).toEqual(['subtitle']);
  });
});

如何在带有testIds的React Native Test Renderer中使用Jest测试？

0 个答案: