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).