mardi 18 février 2020

How to use Jest Testing with React Native Test Renderer w/ testIds?

I'm getting into testing with Jest and react-test-renderer (Not Enzyme), but I can't seem to properly test what I'm trying to do.

In the Forgot Password component, I want to:

  • Test that TitleLargeWithHeader renders with the the title "Forgot Password". I gave it a testId="title", but I'm not sure how to query for that id.
  • Test that the text component with the testId="subtitle" renders "An email will be sent to your account email to reset your password." I'm also not sure how to query for that id.

Can someone point me in the right direction or am I missing something?

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

Aucun commentaire:

Enregistrer un commentaire