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
TitleLargeWithHeaderrenders with the the title "Forgot Password". I gave it atestId="title", but I'm not sure how to query for that id. - Test that the
textcomponent with thetestId="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