Playing around with RN Cleansing

Currently, I am referring to the Detox mocking guide specifically with typescript. The issue I am facing is that the app consistently logs console.log from the X.ts file instead of the expected X.e2e.ts file.

Here are the versions of dependencies in use:

react-native: 0.61.5,
detox: 16.4.0

Metro Configuration:

"detox": {
    "test-runner": "jest",
    "runner-config": "e2e/config.json",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/App.app",
        "build": "RN_SRC_EXT=e2e.js,e2e.ts xcodebuild -workspace ios/App.xcworkspace -scheme 'App Test' -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11"
        }
      }
    }
  }

metro.config.js

const defaultSourceExts = require("metro-config/src/defaults/defaults").sourceExts;

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  },
  resolver: {
    sourceExts: process.env.RN_SRC_EXT ? process.env.RN_SRC_EXT.split(",").concat(defaultSourceExts) : defaultSourceExts
  }
};

console.log("default", defaultSourceExts);
console.log("module.exports from e2e", module.exports);

/** above console results into the following

default [ 'js', 'json', 'ts', 'tsx' ]
module.exports from e2e { transformer:
   { getTransformOptions: [AsyncFunction: getTransformOptions] },
  resolver: { sourceExts: [ 'e2e.ts', 'js', 'json', 'ts', 'tsx' ] } }
*/

/src/AppEvent.js

const logEvent = (): void => {
  console.log("from non-test event file");
};

export default {
  logEvent
};

/src/AppEvent.e2e.ts

const logEvent = (): void => {
  console.log("from test event file");
};

export default {
  logEvent
};

When executing 

detox build && detox test
, the metro server fails to log e2d files. To address this, I had to individually run the metro server using 
RN_SRC_EXT=e2e.js,e2e.ts yarn start

typescriptreact-nativee2e-testingdetoxmetro-bundler

Answer №2

In my experience, I have utilized a slightly altered version of the configuration that might be beneficial for anyone seeking this as a point of reference. Here is the modified config:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  let resolverSourceExts = [...sourceExts, 'svg', 'cjs'];
  
 // Mocking setup for detox
  if (process.env.RN_SRC_EXT) {
    resolverSourceExts =
      process.env.RN_SRC_EXT.split(',').concat(resolverSourceExts);
  }
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      sourceExts: resolverSourceExts,
    },
  };
})();

I encountered a similar issue with components not being recognized after transitioning to TypeScript. It turns out, all my components were in TSX format instead of TS files.

To resolve the problem, I simply changed my RN_SRC_EXT to e2e.tsx, and everything functioned smoothly.

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

Pass an array of objects to an Angular 8 component for rendering

Recently, I started working with Angular 8 and faced an issue while trying to pass an array of objects to my component for displaying it in the UI. parent-component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: ...

typescriptpipeangular8

Explaining the distinction between include and rootDir in tsconfig.json

According to the information provided, include defines an array of filenames or patterns that are to be included in the program during the compilation process. On the other hand, rootDir specifies the path to the folder containing the source code of the ap ...

typescripttsconfig

What is the reason behind permitting void functions in the left part of an assignment in Typescript?

Take a look at this Typescript snippet: let action = function (): void { //perform actions }; let result = action(); What makes it suitable for the TypeScript compiler? ...

typescript

Is there any available tool that can autoformat TypeScript in Sublime Text?

I've been utilizing SublimeText for my TypeScript projects, and up until now, I've relied on JsFormat for automatic formatting. Unfortunately, JsFormat doesn't support TypeScript. Are there any alternative tools I can use for auto formatting ...

typescriptsublimetext3

Using object in TypeScript to reduce arrays

Is there a way to set the return value for my reducer in TypeScript? I am looking to achieve: Instead of using 'any', what should I assign as the type for acc? How can I define my return type so that the output will be {temp: 60, temp: 60}? retu ...

javascripttypescript

Encountering a Difficulty while attempting to Distinguish in Angular

I am currently working on a form where I need to dynamically add controls using reactiveForms. One specific task involves populating a dropdown menu. To achieve this, I am utilizing formArray as the fields are dynamic. Data: { "ruleName": "", "ruleD ...

angulartypescriptangular-reactive-forms

Validating a single field name with various DTO types based on conditions in a NestJS application

There is a field named postData in EmailTypeDto, but it has different types based on conditions. It may be confusing to explain in words, but the code makes it clear. export class EmailTypeDto { @IsEnum(EmailType) public type: EmailType; @ValidateIf ...

typescriptvalidationnestjsdto

The softAssert method is not available when trying to implement soft assertions within a TypeScript-based Protractor framework

Uncaught TypeError: assertion.softAssert is not a function I recently included a package called soft-assert using npm in my project. To install this package, I executed the following command: npm i soft-assert -g --save-dev Incorporated the following co ...

typescriptnpmprotractornode-modulesassert

Guide on Clearly Defining a Return Type in Angular4/ionic3

How can I specify a specific return type to only retrieve the necessary data from a mongodb server using nodejs? Some challenges I'm encountering: 1. The nodejs server always returns an array of json data, forcing me to access the data in ionic3 as ...

node.jsangularmongodbtypescriptionic3

Consider the presence of various peer dependency versions in a react-typescript library

Currently, I am in the process of converting my react component library react-esri-leaflet to typescript. This library requires the user to install react-leaflet as a peerDependency and offers support for both react-leaflet version 3 (RLV3) and react-leafl ...

reactjstypescriptnpmlibrariespeer-dependencies

What is the solution for breaking a querySnapshot in Firestore?

Is there a way to exit a querysnapshot loop prematurely? I attempted using a for loop, but I keep encountering the following error message. How can this error be resolved or is there an alternative method to break out of a snapshot loop? code return ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestore

IntelliSense for TypeScript Variable Names in Intellij

When declaring a variable or field in Java, it is common practice to specify the type. For example: public SomeDataType someDataType = new SomeDataType(123) As you begin typing Som.., IntelliJ's autocomplete feature will likely suggest SomeDataTyp ...

typescriptintellij-idea

sass-loader in webpack ignoring tsconfig paths

It appears that the Sass-loader is not utilizing the path alias declared in the typescript configuration. When using @use or @import, it results in a "not found" error. Webpack resolve: { plugins: [new TsconfigPathsPlugin()], tsconfig "paths&quo ...

typescriptwebpacktsconfigsass-loader

Determine which rows have the checkbox enabled and showcase them in a separate table using Angular

I currently have two tables, namely Table1 and Table2. The data in Table1 is fetched from a service and contains columns like Qty, Price, and Checkbox. The Checkbox column consists of checkboxes as values, while Qty and Price columns contain numeric values ...

javascripthtmljqueryangulartypescript

Exploring ways to customize or replace the extended CurrencyPipe type in Angular

I'm currently working on reusing an existing currency pipe from Angular common. My objective is to truncate the .00 when the value is round. Here's the code I've come up with: /** Transform currency string and round it. */ @Pipe({name: &apo ...

angulartypescriptoopangular2-pipe

Unable to retrieve any data from BehaviorSubject within the observable

Trying to pass data inside an observable function from multiple services to an unrelated component without using service calls by utilizing BehaviorSubject has yielded mixed results. service.ts export class Data{ name:string; age:number; class:string; ...

angulartypescriptobservablebehaviorsubject

Using the assert statement in asynchronous functions in TypeScript

I have a block of code similar to the following, which contains a function utilizing async. Whenever I insert an assert statement within this function, it causes the code execution to halt at that specific line without throwing any errors. It simply stops ...

typescriptasync-awaitassert

Find the calculated values within an Angular Material table

I came across this fantastic example of an Angular Material table with checkboxes that fits perfectly with what I want to implement in my application. However, I am facing a challenge - I need to calculate the total value of the checked rows. Specifically, ...

angulartypescriptangular-material

Expand the ApiGateProxyEvent category from aws-lambda

Looking to enhance the ApiGateProxyEvent of aws-lambda in d.ts. Initial attempts replaced the entire APIGatewayProxyEvent instead of extending it as intended. declare namespace AWSLambda { interface APIGatewayProxyEvent { body: any; user: any; ...

node.jstypescriptaws-lambda

Searching and Sorting through JSON Data in React Native

I am currently expanding my knowledge in React Native and experimenting with filtering a JSON data set on a screen. My goal is to display only the filtered results on the screen. Would it be advisable for me to create a new component called FilteredTicket? ...

javascriptreactjsreact-native