Jest setup for unit tests in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Jest in a React Native test file.

React Native

import [1] from 'jest';

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

Arender

Bdescribe

Cjest

Dtest

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'test' or 'describe' directly from 'jest' instead of importing 'jest' itself.

Using 'render' which is from testing-library, not Jest.

You import jest to access Jest's testing functions and mocks.

2fill in blank

medium

Complete the code to define a test case using Jest.

React Native

test('renders correctly', () => [1]);

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

Adescribe('App')

Brender(<App />)

Cconsole.log('test')

Dexpect(true).toBe(true)

Attempts:

3 left

💡 Hint

Common Mistakes

Using render directly inside test without assertions.

Using describe inside test which is incorrect.

The test function needs a callback with assertions like expect to check conditions.

3fill in blank

hard

Fix the error in the Jest mock setup for a React Native module.

React Native

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper', () => [1]);

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

Anull

B{}

C() => {}

Djest.fn()

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a function instead of an object.

Returning null which causes Jest to fail.

Jest expects a module mock to be an object, so returning an empty object {} avoids errors.

4fill in blank

hard

Fill both blanks to configure Jest to transform JavaScript files correctly.

React Native

"transform": {"^.+\\.[1]$": "[2]"},

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

Ajs

Bjsx

Cbabel-jest

Dts-jest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'js' extension only, missing JSX files.

Using 'ts-jest' without TypeScript setup.

The transform key uses a regex for .jsx files and the transformer babel-jest to compile them.

5fill in blank

hard

Fill all three blanks to write a Jest test that checks if a component renders a text.

React Native

import { render, screen } from '@testing-library/react-native';
import App from './App';
test('shows welcome text', () => {
  render(<[1] />);
  const textElement = screen.getByText(/[2]/i);
  expect(textElement).toBe[3]();
});

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

AApp

BWelcome

CTruthy

DFalsy

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong component name in render.

Searching for text not present in the component.

Using toBeFalsy which expects the element not to exist.

You render the App component, look for text containing 'Welcome', and expect it to be truthy (found).

Practice

1. What is the primary purpose of setting up Jest in a React Native project?

easy

A. To run automated tests and catch bugs early

B. To improve app performance on devices

C. To style components with CSS

D. To deploy the app to app stores

Solution

1. Step 1: Understand Jest's role

   Jest is a testing framework used to run automated tests on code.

2. Step 2: Identify its main benefit

   Running tests helps find bugs early before releasing the app.

3. Final Answer:

   To run automated tests and catch bugs early -> Option A

4. Quick Check:

   Jest purpose = testing and bug catching [OK]

Hint: Jest is for testing code, not styling or deployment [OK]

Common Mistakes:

• Confusing Jest with styling tools
• Thinking Jest improves app speed
• Assuming Jest deploys apps

2. Which of the following is the correct way to import Jest functions in a React Native test file?

easy

A. import { test, expect } from '@testing-library/react-native';

B. No import needed; Jest globals are available automatically

C. const { test, expect } = require('jest');

D. import { test, expect } from 'jest';

Solution

1. Step 1: Recall Jest globals

   Jest provides test and expect as global functions by default.

2. Step 2: Understand import necessity

   Because they are globals, you do not need to import them explicitly.

3. Final Answer:

   No import needed; Jest globals are available automatically -> Option B

4. Quick Check:

   Jest globals = no import needed [OK]

Hint: Jest test and expect are global, no import required [OK]

Common Mistakes:

• Trying to import test and expect explicitly
• Confusing Jest with other libraries needing imports
• Using require instead of relying on globals

3. Given this test code snippet, what will be the test result?

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

medium

A. Test fails because 1 + 2 is not 3

B. Test fails with a syntax error

C. Test passes successfully

D. Test throws a runtime error

Solution

1. Step 1: Evaluate the expression inside expect

   1 + 2 equals 3, so expect(3).toBe(3) is true.

2. Step 2: Understand Jest test behavior

   Since the expectation matches, the test passes without errors.

3. Final Answer:

   Test passes successfully -> Option C

4. Quick Check:

   1 + 2 = 3, test passes [OK]

Hint: Check math inside expect; if true, test passes [OK]

Common Mistakes:

• Thinking 1 + 2 is not 3
• Confusing syntax errors with logic errors
• Assuming runtime errors without cause

4. You wrote this test but it fails with a syntax error:

test('check true value', () => {
  expect(true).toBeTrue();
});

What is the likely cause?

medium

A. toBeTrue() is not a Jest matcher; use toBe(true) instead

B. Missing import of toBeTrue from Jest library

C. Syntax error due to missing semicolon after expect

D. Jest does not support boolean tests

Solution

1. Step 1: Check Jest matchers for booleans

   Jest does not have a matcher called toBeTrue(); it uses toBe(true) instead.

2. Step 2: Identify cause of syntax error

   Using an unknown matcher causes Jest to throw an error.

3. Final Answer:

   toBeTrue() is not a Jest matcher; use toBe(true) instead -> Option A

4. Quick Check:

   Use toBe(true), not toBeTrue() [OK]

Hint: Use toBe(true) for boolean checks, not toBeTrue() [OK]

Common Mistakes:

• Trying to import non-existent matchers
• Assuming semicolon causes syntax error
• Believing Jest can't test booleans

5. You want to test a React Native component that renders a button with text 'Click me'. Which setup is correct to write a Jest test using @testing-library/react-native?

hard

A. import { render } from '@testing-library/react-native';
test('button text', () => {
const { getByText } = render();
expect(getByText('Click me')).toBeFalsy();
});

B. import { render } from 'react-native-testing-library';
test('button text', () => {
const { getByText } = render();
expect(getByText('Click me')).toBeNull();
});

C. import { render } from '@testing-library/react-native';
test('button text', () => {
const { getByText } = render();
expect(getByText('Click me')).toBeNull();
});

D. import { render } from '@testing-library/react-native';
test('button text', () => {
const { getByText } = render();
expect(getByText('Click me')).toBeTruthy();
});

Solution

1. Step 1: Use correct testing library import

   @testing-library/react-native is the recommended library for rendering components in Jest tests.

2. Step 2: Check assertion correctness

   getByText returns the element if found; expect(...).toBeTruthy() confirms it exists.

3. Final Answer:

   Correct import and expect(getByText('Click me')).toBeTruthy() -> Option D

4. Quick Check:

   Render + getByText + toBeTruthy() = correct test [OK]

Hint: Use getByText and expect(...).toBeTruthy() to check rendered text [OK]

Common Mistakes:

• Using wrong testing library import
• Expecting getByText to return null when text exists
• Using toBeFalsy() instead of toBeTruthy() for found elements