Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

Question

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

I have a ReactNative app and I'm attempting to create a test using Jest. The test requires classes from a native component (react-native-nfc-manager), and one of the needed classes is defined as follows

  export interface TagEvent {
    ndefMessage: NdefRecord[];
    maxSize?: number;
    type?: string;
    techTypes?: string[];
    id?: number[];
  }

If I try to directly use this definition like

const event = new TagEvent();

I encounter this error

TypeError: _reactNativeNfcManager.default is not a constructor

Coming from the Java world, I understand that an interface cannot be instantiated, it requires a class. So, I created a test instance for this interface:

class TestTagEvent implements TagEvent {
    ndefMessage: NdefRecord[] = []
    maxSize?: number;
    type?: string;
    techTypes?: string[];
    id?: number[];
}

However, I faced a different issue as it also didn't work:

TypeError: _TestTagEvent.TestTagEvent is not a constructor

What am I overlooking?

javascript typescript react-native

Answer 1

Answer №1

An object cannot be directly created using an interface. Instead, an interface serves as a blueprint for defining the properties that need to be present in variables.

When initializing a variable with an interface, you should follow this syntax:

const eventVar: TagEvent;

If you intend to use TagEvent as a constructible object, it must be defined as a class rather than an interface. For example:

class TagEvent {
  constructor(props: TagEventProps) {
    this.ndefMesssage = props.nDefMessage;
    //etc...
  }
}

Answer 2

An object cannot be directly created using an interface. Instead, an interface serves as a blueprint for defining the properties that need to be present in variables.

When initializing a variable with an interface, you should follow this syntax:

const eventVar: TagEvent;

If you intend to use TagEvent as a constructible object, it must be defined as a class rather than an interface. For example:

class TagEvent {
  constructor(props: TagEventProps) {
    this.ndefMesssage = props.nDefMessage;
    //etc...
  }
}

Answer 3

Answer №2

Through additional experimentation, the issue was resolved by including the 'export' keyword in the class declaration. Surprisingly, the initial error description did not accurately pinpoint the underlying problem.

export class TestTagEvent implements TagEvent {

Answer 4

Through additional experimentation, the issue was resolved by including the 'export' keyword in the class declaration. Surprisingly, the initial error description did not accurately pinpoint the underlying problem.

export class TestTagEvent implements TagEvent {

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

Answer №1

Answer №2

Similar questions

conceal a targeted section from the bottom of the iframe

Integrate a fresh component and include a hyperlink to the URL simultaneously

Attempting to adhere to the prescribed Cypress tutorial is resulting in various errors related to being "compiled under '--isolatedModules'"

Using Angular's setTimeout() function with an external lambda that includes a parameter

How about: "Add random HTML content using jQuery each time the page is refreshed

What are some alternative ways to link a local MongoDB database to my Android Studio application instead of using MongoLab?

Can you tell me the alternatives for getServerSideProps and getStaticProps in Next.js version 14?

Why is it that PHP is used to retrieve the database value, JavaScript increments it, and AJAX saves it back to the database, yet it resets to 0.0 upon page refresh?

What could be the reason my Angular interceptor isn't minified correctly?

Switch between different classes with JavaScript

Having trouble troubleshooting this issue where the object data is displaying in the console, but encountering an error when trying to use the resetValue

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

Access the data within a jsonArray using Cypress

confirmation message upon completing a form submission

Utilize JavaScript/jQuery to implement a prompt for saving downloaded files

Automatically populate email fields with pre-filled form data

mysterious supplier factoryprovider <- factory <- angular js controller

Integrating Braintree with Angular for accepting Android Pay transactions

Refresh all color pickers with Bootstrap 4 Colorpicker - enforce the update of every color selector

Angular not detecting changes in string variables