Why testing ensures app quality in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a button that logs a message when pressed.

React Native

import React from 'react';
import { Button, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Button title="Test" onPress={() => console.[1]('Button pressed')} />
    </View>
  );
}

Drag options to blanks, or click blank then click option'

Aerror

Bwarn

Clog

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.warn or console.error which show warnings or errors instead of normal logs.

The console.log function prints messages to the console, which helps us see if the button press works during testing.

2fill in blank

medium

Complete the code to test if a component renders the correct text.

React Native

import React from 'react';
import { render } from '@testing-library/react-native';
import Greeting from './Greeting';

test('shows greeting message', () => {
  const { getByText } = render(<Greeting />);
  expect(getByText([1])).toBeTruthy();
});

Drag options to blanks, or click blank then click option'

A`Hello, world!`

BHello, world!

C"Hello, world!"

D'Hello, world!'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the text without quotes causes syntax errors.

The getByText function expects a string argument wrapped in quotes to find the text in the component.

3fill in blank

hard

Fix the error in the test by completing the missing assertion method.

React Native

import React from 'react';
import { render } from '@testing-library/react-native';
import Button from './Button';

test('button is disabled', () => {
  const { getByTestId } = render(<Button disabled={true} />);
  expect(getByTestId('btn')).[1]();
});

Drag options to blanks, or click blank then click option'

AtoBeDisabled

BtoBeEnabled

CtoBeTruthy

DtoBeFalsy

Attempts:

3 left

💡 Hint

Common Mistakes

Using toBeEnabled() which expects the button to be enabled.

The toBeDisabled() matcher checks if the button is disabled, which matches the test description.

4fill in blank

hard

Fill both blanks to create a test that checks if a function is called when a button is pressed.

React Native

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import SubmitButton from './SubmitButton';

test('calls onSubmit when pressed', () => {
  const onSubmit = jest.[1]();
  const { getByText } = render(<SubmitButton onPress={onSubmit} />);
  fireEvent.[2](getByText('Submit'));
  expect(onSubmit).toHaveBeenCalled();
});

Drag options to blanks, or click blank then click option'

Afn

Bclick

Cpress

Dmock

Attempts:

3 left

💡 Hint

Common Mistakes

Using jest.mock() instead of jest.fn()

Using fireEvent.click() which is for web, not React Native.

jest.mock() is incorrect here; the correct jest function to create a mock function is jest.fn(). The event to simulate a button press in React Native testing library is fireEvent.press().

So the correct answers are jest.fn() and fireEvent.press().

5fill in blank

hard

Fill all three blanks to write a test that checks if a text input updates its value correctly.

React Native

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import TextInputComponent from './TextInputComponent';

test('updates text input value', () => {
  const { getByPlaceholderText } = render(<TextInputComponent />);
  const input = getByPlaceholderText([1]);
  fireEvent.[2](input, { target: { [3]: 'Hello' } });
  expect(input.props.value).toBe('Hello');
});

Drag options to blanks, or click blank then click option'

A'Enter text'

BchangeText

Cvalue

DonChangeText

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onChangeText' as event name, which is a prop, not a fireEvent method.

Using 'target' instead of 'value' property.

The placeholder text is a string, so it needs quotes. The correct fireEvent method for text input in React Native is changeText. The event object uses the property value to set the new text.

Practice

1. Why is testing important in React Native app development?

easy

A. It helps find bugs before users see them

B. It makes the app run faster

C. It reduces the app size

D. It changes the app design automatically

Solution

1. Step 1: Understand the purpose of testing

   Testing is done to catch errors and bugs early in development.

2. Step 2: Identify the benefit of testing

   Finding bugs before users experience them improves app quality and user satisfaction.

3. Final Answer:

   It helps find bugs before users see them -> Option A

4. Quick Check:

   Testing finds bugs early = A [OK]

Hint: Testing catches bugs early to keep users happy [OK]

Common Mistakes:

• Thinking testing makes app faster
• Believing testing changes app design
• Confusing testing with app size reduction

2. Which of the following is the correct way to write a simple test in React Native using Jest?

easy

A. test('adds 1 + 2 to equal 3', () => { expect(1 + 2).equal(3); });

B. test 'adds 1 + 2 equals 3' { expect(1 + 2) == 3 }

C. test('adds 1 + 2', () => expect(1 + 2) = 3);

D. test('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3); });

Solution

1. Step 1: Check Jest test syntax

   Jest tests use the function test(description, callback) and expect(value).toBe(expected).

2. Step 2: Identify correct syntax

   test('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3); }); matches the correct Jest syntax with toBe matcher and arrow function.

3. Final Answer:

   test('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3); }); -> Option D

4. Quick Check:

   Jest test syntax = D [OK]

Hint: Look for test() with expect().toBe() syntax [OK]

Common Mistakes:

• Using == instead of toBe() matcher
• Missing arrow function or braces
• Using .equal() instead of .toBe()

3. What will be the output of this test code snippet?

test('button press changes text', () => {
  const text = 'Hello';
  const newText = text + ' World';
  expect(newText).toBe('Hello World');
});

medium

A. Syntax error in test code

B. Test fails with mismatch error

C. Test passes successfully

D. Test skipped automatically

Solution

1. Step 1: Analyze the test logic

   The test concatenates 'Hello' and ' World' to form 'Hello World'.

2. Step 2: Compare expected and actual values

   expect(newText).toBe('Hello World') matches the actual newText value.

3. Final Answer:

   Test passes successfully -> Option C

4. Quick Check:

   Matching expected and actual = C [OK]

Hint: Check if expected string matches actual string exactly [OK]

Common Mistakes:

• Assuming test fails due to string concatenation
• Confusing toBe() with toEqual()
• Thinking syntax error without checking code

4. Identify the error in this React Native test code:

test('check value', () => {
  expect(5 + 5).toBe(11);
});

medium

A. The test will fail because expected value is incorrect

B. The test will pass because 5 + 5 equals 11

C. Syntax error due to missing semicolon

D. Test will be skipped because of wrong test name

Solution

1. Step 1: Evaluate the expression inside expect()

   5 + 5 equals 10, but expected is 11.

2. Step 2: Understand test result

   Since actual (10) does not equal expected (11), test fails.

3. Final Answer:

   The test will fail because expected value is incorrect -> Option A

4. Quick Check:

   Mismatch in expected value = B [OK]

Hint: Check if expected value matches actual calculation [OK]

Common Mistakes:

• Assuming test passes despite wrong expected value
• Thinking missing semicolon causes syntax error
• Believing test name affects execution

5. You want to ensure your React Native app's login button works correctly after changes. Which testing approach best ensures app quality?

hard

A. Only test manually by clicking the button once

B. Write automated tests that simulate button press and check results

C. Ignore testing because the button looks fine

D. Test only on one device without automation

Solution

1. Step 1: Understand testing approaches

   Automated tests simulate user actions repeatedly and catch errors reliably.

2. Step 2: Compare options for quality assurance

   Manual or limited device testing misses many bugs and is less reliable than automation.

3. Final Answer:

   Write automated tests that simulate button press and check results -> Option B

4. Quick Check:

   Automated testing ensures quality = A [OK]

Hint: Automate user actions to catch bugs early [OK]

Common Mistakes:

• Relying only on manual testing
• Ignoring testing due to visual checks
• Testing on limited devices without automation