Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen
Käyttäkää fireEvent.press- ja fireEvent.changeText-funktioita käyttäjän toimien simulointiin ja varmistakaa sen jälkeen, että tila päivittyy ja callback-funktiot kutsutaan oikein.
Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Käyttäjätapahtumien simulointi testeissä
Komponenttitestit ovat hyödyllisiä, kun ne tarkistavat, miten komponentti reagoi käyttäjän toimintaan – painikkeiden painamiseen, tekstin syöttämiseen ja lomakkeen lähettämiseen. React Native Testing Library tarjoaa fireEvent-apuohjelman, jolla näitä toimintoja voi simuloida testiympäristössä ilman oikeaa laitetta.
Tapahtumien simulointi ei vastaa täysin oikeaa käyttäjän syötettä, sillä se kutsuu suoraan elementin tapahtumankäsittelijä-propia. Useimmissa yksikkö- ja integraatiotesteissä tämä kuitenkin riittää varmistamaan, että komponentin logiikka reagoi toimintoihin oikein.
fireEvent.press painikkeen napautusten simulointiin
fireEvent.press(element) simuloi TouchableOpacity-, Pressable- tai Button-elementin napauttamista. Painamisen jälkeen tarkistakaa odotetut sivuvaikutukset, kuten tilan päivittyminen, navigointikutsut tai callback-funktioiden kutsuminen.
Etsikää painike ensin kyselyllä, kuten getByText tai getByRole('button'), ja laukaiskaa sitten painamistapahtuma. Kyselyn ja tapahtuman yhdistelmä simuloi koko käyttäjän toiminnan: painikkeen etsimisen, sen napauttamisen ja tuloksen tarkistamisen.
import { render, fireEvent } from '@testing-library/react-native';
import { Counter } from '../src/components/Counter';
it('increments the count when the plus button is pressed', () => {
const { getByText } = render(<Counter />);
// Assert initial state
expect(getByText('Count: 0')).toBeTruthy();
// Simulate button press
fireEvent.press(getByText('+'));
// Assert state changed
expect(getByText('Count: 1')).toBeTruthy();
// Press again
fireEvent.press(getByText('+'));
expect(getByText('Count: 2')).toBeTruthy();
});fireEvent.changeText TextInput-elementille
fireEvent.changeText(element, text) simuloi tekstin kirjoittamista TextInput-komponenttiin. Se kutsuu onChangeText-proppia annetulla merkkijonolla, jonka pitäisi päivittää komponentin tila.
Tämä on oikea tapa simuloida tekstin kirjoittamista testissä. Älkää yrittäkö muokata komponentin tilaa suoraan – käyttäkää aina tapahtumankäsittelijää testataksenne todellista tietovirtaa.
import { render, fireEvent } from '@testing-library/react-native';
import { SearchBar } from '../src/components/SearchBar';
it('calls onSearch with the typed query when submit is pressed', () => {
const mockSearch = jest.fn();
const { getByPlaceholderText, getByText } = render(
<SearchBar onSearch={mockSearch} />
);
const input = getByPlaceholderText('Search...');
// Simulate typing
fireEvent.changeText(input, 'react native');
// Simulate pressing the search button
fireEvent.press(getByText('Search'));
expect(mockSearch).toHaveBeenCalledWith('react native');
});Lomakkeen validointivirheiden testaaminen
Yksi lomakkeiden tärkeistä testaustilanteista on varmistaa, että validointivirheet tulevat näkyviin, kun käyttäjä lähettää virheelliset tiedot. Simuloikaa lomakkeen lähettämistä täyttämättä pakollisia kenttiä ja varmistakaa sitten, että virheilmoitukset näkyvät renderöidyssä tulosteessa.
Tämä testi varmistaa sekä validointilogiikan että virheilmoitusten käyttöliittymärenderöinnin – kaksi asiaa, jotka rikkoutuvat helposti refaktoroinnin aikana. Se on yksi arvokkaimmista testeistä, jonka voitte kirjoittaa lomakekomponentille.
it('shows an error when email is empty and form is submitted', () => {
const { getByText, getByRole, queryByText } = render(<LoginForm />);
// Initially no error
expect(queryByText('Email is required')).toBeNull();
// Submit without filling in the email field
fireEvent.press(getByRole('button', { name: 'Sign In' }));
// Error message should now appear
expect(getByText('Email is required')).toBeTruthy();
expect(queryByText('Password is required')).toBeTruthy();
});Navigointikutsujen testaaminen
Kun painikkeen pitäisi siirtyä toiseen näkymään, mokatkaa navigation-objekti ja varmistakaa, että navigate kutsuttiin oikealla näkymän nimellä ja parametreilla. Näin navigointilogiikka voidaan varmistaa ilman, että testissä tarvitaan kokonaista NavigationContainer-komponenttia.
Mokatkaa useNavigation paketista @react-navigation/native testitiedostossa ja antakaa sille mokattu navigate-funktio. Varmistakaa painikkeen painamisen jälkeen, että navigate kutsuttiin oikein.
const mockNavigate = jest.fn();
jest.mock('@react-navigation/native', () => ({
...jest.requireActual('@react-navigation/native'),
useNavigation: () => ({ navigate: mockNavigate }),
}));
it('navigates to PostDetail when a post is pressed', () => {
const { getByText } = render(<PostList posts={[
{ id: '1', title: 'Hello World' }
]} />);
fireEvent.press(getByText('Hello World'));
expect(mockNavigate).toHaveBeenCalledWith('PostDetail', { postId: '1' });
});Testaaminen userEvent-ohjelmointirajapinnalla realistisempia vuorovaikutuksia varten
RNTL v12+ sisältää userEvent-ohjelmointirajapinnan, joka simuloi realistisempia käyttäjän vuorovaikutuksia kuin fireEvent. Esimerkiksi userEvent.type(element, 'text') simuloi kunkin merkin painamista yksitellen ja käynnistää samalla focus-, blur- ja näppäinpainallustapahtumat oikeassa järjestyksessä.
Käyttäkää userEvent-ohjelmointirajapintaa tilanteissa, joissa tapahtumien järjestyksellä on merkitystä – esimerkiksi lomakkeen validoinnissa, joka käynnistyy blur-tapahtumasta eikä change-tapahtumasta. userEvent on asynkroninen ja edellyttää await-avainsanan käyttöä.
import { render, userEvent } from '@testing-library/react-native';
it('shows inline error after leaving the email field empty', async () => {
const user = userEvent.setup();
const { getByPlaceholderText, findByText } = render(<RegistrationForm />);
const emailInput = getByPlaceholderText('Email');
// Focus the field, then leave it (triggers onBlur validation)
await user.type(emailInput, '');
await user.press(getByPlaceholderText('Password')); // Focus next field
// Error appears after blur
expect(await findByText('Email is required')).toBeTruthy();
});Kytkin- ja Switch-komponenttien testaaminen
Käyttäkää Switch-komponenteille ja mukautetuille kytkinkomponenteille valueChange-tapahtumaa simuloidaksenne käyttäjän kytkimen vaihtamista. Varmistakaa, että tila päivittyy oikein ja että mahdolliset sivuvaikutukset, kuten tietojen tallentaminen, käynnistyvät.
fireEvent-apuohjelma tukee myös vieritystapahtumille tarkoitettua fireEvent.scroll-kutsua sekä yleisiä mukautettuja tapahtumanimiä varten kutsua fireEvent(element, 'press'), jos komponentti käyttää onPress-proppin sijaan muuta propin nimeä.
import { render, fireEvent } from '@testing-library/react-native';
import { NotificationsSettings } from '../src/screens/NotificationsSettings';
it('toggles notifications when the switch is pressed', () => {
const mockSave = jest.fn();
const { getByTestId } = render(
<NotificationsSettings onSave={mockSave} />
);
const toggle = getByTestId('notifications-toggle');
// Simulate toggling the switch to true
fireEvent(toggle, 'valueChange', true);
expect(mockSave).toHaveBeenCalledWith({ notifications: true });
// Toggle back to false
fireEvent(toggle, 'valueChange', false);
expect(mockSave).toHaveBeenCalledWith({ notifications: false });
});Asynkronisten tilamuutosten testaaminen act-komennolla
Kun vuorovaikutus käynnistää tilapäivityksen Promisen, kuten API-kutsun, kautta, vuorovaikutus on käärittävä act()-kutsuun, jotta React voi suorittaa päivitykset loppuun ennen väitteiden tekemistä. RNTL:n fireEvent käärii synkroniset päivitykset automaattisesti act-kutsuun, mutta asynkroniset tilapäivitykset edellyttävät nimenomaista käsittelyä.
Käyttäkää await act(async () => { ... })-rakennetta, kun komponentti tekee tapahtuman seurauksena asynkronisen kutsun, tai käyttäkää findBy-kyselyitä, jotka odottavat DOM-päivitystä implisiittisesti.
import { render, fireEvent, act, waitFor } from '@testing-library/react-native';
it('shows success message after form submission', async () => {
const { getByRole, findByText } = render(<ContactForm />);
fireEvent.press(getByRole('button', { name: 'Submit' }));
// findByText waits for the element to appear (async)
const successMsg = await findByText('Message sent successfully!');
expect(successMsg).toBeTruthy();
// Alternative: use waitFor with getByText
await waitFor(() => {
expect(getByText('Message sent successfully!')).toBeTruthy();
});
});Käytöstä poistettujen tilojen testaaminen
Painikkeet ja syötekentät poistetaan usein käytöstä latauksen ajaksi tai ennen validoinnin läpäisemistä. Testatkaa, että käytöstä poistettu tila asetetaan oikein käyttämällä jest-nativen toBeDisabled()-väitettä, ja varmistakaa, ettei käytöstä poistetun painikkeen painaminen kutsu käsittelijää.
Näin löytyvät virheet, joissa kehittäjä unohtaa poistaa lähetyspainikkeen käytöstä API-kutsun ajaksi, jolloin käyttäjä voi lähettää lomakkeen useita kertoja ja luoda päällekkäisiä tietoja.
it('disables the submit button while loading', async () => {
const mockSubmit = jest.fn().mockReturnValue(new Promise(() => {})); // Never resolves
const { getByRole } = render(<LoginForm onSubmit={mockSubmit} />);
const emailInput = getByPlaceholderText('Email');
const passwordInput = getByPlaceholderText('Password');
fireEvent.changeText(emailInput, 'user@test.com');
fireEvent.changeText(passwordInput, 'password123');
const submitBtn = getByRole('button', { name: 'Sign In' });
fireEvent.press(submitBtn);
// Button should be disabled while the submit Promise is pending
expect(submitBtn).toBeDisabled();
expect(mockSubmit).toHaveBeenCalledTimes(1); // Not called again
});Vieritystapahtumien testaaminen
Testatkaa vieritykseen perustuvia toimintoja, kuten load-more-toiminnallisuutta, käyttämällä fireEvent.scroll-kutsua. Välittäkää mokattu tapahtumaobjekti, joka vastaa React Native -komponenttien vieritystapahtumalta odottamaa rakennetta.
Tämä on hyödyllistä FlatList-komponentin onEndReached-toiminnon, alas vetämällä päivittämisen ja kaikkien vierityssijaintiin reagoivien komponenttien testaamisessa. Tapahtumaobjektissa on oltava nativeEvent.contentOffset ja nativeEvent.contentSize.
it('loads more posts when scrolling to the bottom', () => {
const mockLoadMore = jest.fn();
const { getByTestId } = render(
<PostList posts={mockPosts} onLoadMore={mockLoadMore} />
);
const list = getByTestId('posts-list');
// Simulate scrolling to near the bottom
fireEvent.scroll(list, {
nativeEvent: {
contentOffset: { y: 900 },
contentSize: { height: 1000, width: 400 },
layoutMeasurement: { height: 100, width: 400 },
},
});
expect(mockLoadMore).toHaveBeenCalledTimes(1);
});Testien järjestäminen käyttäjän matka -mallilla
Arvokkaimmat testit varmistavat koko käyttäjän toimintavirran yhden komponentin tai näkymän sisällä – tätä kutsutaan käyttäjän matka -malliksi. Sen sijaan että testaisitte jokaisen tapahtuman erikseen, kirjoittakaa yksi testi, joka ketjuttaa useita vuorovaikutuksia: täyttäkää lomake, painakaa lähetyspainiketta ja varmistakaa lopullinen tila.
Tämän integraatiotestien kaltaiset komponenttitestit ovat yksikkötestejä hitaampia, mutta löytävät enemmän todellisia virheitä, koska ne testaavat komponentin eri osien välisiä vuorovaikutuksia.
it('completes the login flow: type credentials, submit, show home', async () => {
const { getByPlaceholderText, getByRole, findByText } = render(
<LoginScreen />, { wrapper: NavigationWrapper }
);
// Step 1: Type email
fireEvent.changeText(getByPlaceholderText('Email'), 'alice@test.com');
// Step 2: Type password
fireEvent.changeText(getByPlaceholderText('Password'), 'secret123');
// Step 3: Submit
fireEvent.press(getByRole('button', { name: 'Sign In' }));
// Step 4: Assert navigation to home screen
expect(await findByText('Welcome, Alice!')).toBeTruthy();
});Pikatarkistus
Testatkaa, kuinka hyvin hallitsette tämän oppitunnin React Native Mobile Development -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte: käyttämään fireEvent.press- ja fireEvent.changeText-kutsuja käyttäjän vuorovaikutusten simulointiin komponenttitesteissä, testaamaan lomakkeen validointivirheitä, navigointikutsuja ja asynkronisia tilamuutoksia sekä ketjuttamaan käyttäjän matka -mallilla useita vuorovaikutuksia arvokkaammiksi integraatiotestien kaltaisiksi testeiksi. Seuraavaksi mokaamme natiivit moduulit ja testaamme asynkronisia koodivirtoja React Nativessa.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen”?
Käyttäkää fireEvent.press- ja fireEvent.changeText-funktioita käyttäjän toimien simulointiin ja varmistakaa sen jälkeen, että tila päivittyy ja callback-funktiot kutsutaan oikein. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Jestin määrittäminen React Native -projektiin
- Komponenttien renderöinti React Native Testing Librarylla
- Tapahtumien käynnistäminen ja käyttäjän vuorovaikutuksen testaaminen
- Natiivimoduulien ja asynkronisen koodin mockaaminen