An unexpected token was encountered by Jest while running a test in a test.tsx file for a React Native project

It seems like many individuals are encountering this particular issue. Despite trying various methods, I am still unable to resolve it.

Currently, I am facing the following error in my terminal:

FAIL tests/App.test.tsx ● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file due to non-standard JavaScript syntax or incorrect Jest configuration.

By default, Jest supports Babel for transforming files based on your Babel configuration.

To address this issue, consider:
 • Enabling ECMAScript Modules: https://jestjs.io/docs/ecmascript-modules
 • Using TypeScript: https://jestjs.io/docs/getting-started#using-typescript
 • Customizing transformation settings in your configuration.
 • Stubbing out non-JS modules with moduleNameMapper config option.

Refer to Jest documentation for detailed examples and configurations:
https://jestjs.io/docs/configuration
For custom transformations, visit:
https://jestjs.io/docs/code-transformation

Details:

/Users/mmt10901/Desktop/Code/B2B-Shopfront-Mobile/__tests__/App.test.tsx:37
    const component = renderer.create(<App_1.NavBody />);
                                      ^

SyntaxError: Unexpected token '<'

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)

Here is my current Jest configuration:

Insert Jest configuration here...

My Babel Config:

Insert Babel config details here...

tsConfig.json:

Insert tsConfig.json content here...

I am using "react-native": "0.71.7"

I would greatly appreciate any assistance as I have been struggling with this basic setup for the past 2 days.

Answer №1

If you encounter a situation where Jest is failing due to an unexpected token when encountering the opening < in a JSX tag, the solution often involves ensuring that the correct React runtime is set. One approach is to configure @babel/preset-react with runtime: "automatic" (and make sure to install @babel/preset-react if required).

For example, in a typical .babelrc file, your configuration might look like this:

{
  "presets": [
    ["@babel/preset-react", { runtime: "automatic" }]
  ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in Jest Testing: An unexpected character '@' was encountered

Encountering issues with NuxtJS Jest tests and attempting to build a Nuxt app to test URL's due to route name errors in some components. Here is the code snippet I tried: beforeAll(async () => { nuxt = new Nuxt({ ...config, server: { port: 3001 } ...

Transmit information between components through a form

Is there a way to transfer data from one component to another in Angular? I have two components set up and I am currently using a selector to display the HTML content in the first component. Now, I need to figure out how to send the data entered in a form ...

Tips for effectively testing a DetailPanel-Property within a React Material Table using Jest

The image above showcases a MaterialTable containing various information and offering the ability to execute (1) actions as well as expand a detailed panel to view more information. The code snippet below functions flawlessly within the application: <Ma ...

react-data-grid: The type of createElement is found to be invalid when using typescript and webpack externals

Hello everyone, I'm currently facing a challenge with setting both the react-data-grid and react-data-grid-addons libraries as externals in webpack to prevent them from being included in my asset bundling. Everything was working perfectly until I move ...

What is causing my function to execute twice in all of my components?

One issue I am facing is that I have created three different components with routing. However, when I open these components, they seem to loop twice every time. What could be causing this behavior and how can I resolve it? For instance, in one of the comp ...

Is a package I overlooked? The 'findOne' property is not found within the 'Schema<Document<any, {}>, Model<any, any>, undefined>'

I have taken over the responsibility of maintaining the websites at my company, and I am encountering the error message (Property 'findOne' does not exist on type 'Schema<Document<any, {}>, Model<any, any>, undefined>' ...

Unable to transfer data through Ionic popover

I've encountered an issue when trying to pass data to my popover component, as the data doesn't seem to be sent successfully. Code HTML <div class="message" id="conversation" *ngFor="let message of messages.notes"> <ion-row class= ...

Experimenting with throws using Jest

One of the functions I'm testing is shown below: export const createContext = async (context: any) => { const authContext = await AuthGQL(context) console.log(authContext) if(authContext.isAuth === false) throw 'UNAUTHORIZED' retu ...

Building a BaseObserver in TypeScript with RxJS

Initially, I created a class called BaseObserver in Swift. In the subscribe method, I pass this class. Now, I am attempting to achieve the same functionality in RxJS using TypeScript. This approach proves useful when you need to execute actions both befor ...

displaying a Google-approved consent form using react-native-firebase/admob

I have been working on integrating Google ads into my React Native app, following the guidelines provided in the official documentation at https://rnfirebase.io/. I have successfully managed to display Google ads, but I am facing an issue with the European ...

What is preventing the union distribution from occurring with T[number] when T is an ArrayLike?

Below, in this demonstration (linked playground, I anticipate that Foo<[0, 1]> and Bar<[0, 1]> will both be resolved to 0[] | 1[] due to the distribution of unions in conditional types. However, in actuality, Foo<[0, 1]> ends up being (0 ...

Issue with conflicting namespaces warning when compiling an Angular 9 project with ng-packagr using Typescript

I'm trying to pinpoint the root cause of this problem, and I suspect it may be related to Typescript. However, it could also involve ng-packagr or Angular. This issue only arose after upgrading to Angular 9. Upon building my production environment, I ...

TypeORM does not have the capability to specify the database setting within the entity decorator

As my TypeORM project grows in size and its components become more discreet yet interconnected, I am exploring ways to separate it into multiple databases while maintaining cross-database relations. To achieve this, I have been experimenting with the data ...

Error: The component `Home` is missing the required function for the view config getter callback, causing an Invariant Violation

I am trying to utilize the key name from an array to call a function on the tab.screen component. Below is my code: import React from 'react'; import { Text, View, TouchableOpacity, Modal } from 'react-native'; import AsyncStorage from ...

The Angular CLI suddenly decided to stop providing me with useful lines (without sourcemaps) in the browser console, but interestingly the terminal continues

I recently noticed a change in my Angular project that is using Angular CLI. Instead of receiving error lines from my code, I am getting errors from compiled files like main.js and vendor.js. The 'normal' error messages in my terminal are pointin ...

Using TypeScript and React: Implementing interfaces based on props conditions

I am currently designing a component that must either receive a prop named text or children, but not both or neither. ✓ Allow <NotificationBar text="Demo"/> <NotificationBar>Demo</NotificationBar> ✗ Disallow <NotificationBar/&g ...

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Attempting to simplify repetitive actions by utilizing commands.ts, such as requesting email and password. However, upon trying to implement this, I encounter an error for the login (Argument of type '"login"' is not assignable to parameter of t ...

Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

I've been struggling to automate tests for my repository using mocha-webpack and Travis CI. The local machine runs the tests smoothly, but Travis CI hasn't been able to complete them yet due to an unresolved error: WEBPACK Failed to compile wit ...

Adjust dropdown options based on cursor placement within textarea

I have a textarea and a dropdown. Whenever a user selects an option from the dropdown menu, it should be inserted into the text area. However, I am facing a bug where the selected value is being inserted at the end of the text instead of at the current cur ...

Creating an Inner Join Query Using TypeORM's QueryBuilder: A Step-by-Step Guide

Hello there! I'm new to TypeORM and haven't had much experience with ORM. I'm finding it a bit challenging to grasp the documentation and examples available online. My main goal is to utilize the TypeORM QueryBuilder in order to create this ...