Typescript Error:TS2345: The argument '{ theme: string; jsonFile: string; output: string; }; }' is not compatible with the parameter type 'Options'

Encountering an error mentioned in the title while using the code snippet below:

import * as fs from 'fs'
import { mkdirp } from 'mkdirp'
import * as report from 'cucumber-html-reporter'
const Cucumber = require('cucumber')

export class CucumberReportExtension {

    private static jsonDir = __dirname + '/../../test/reports/json';
    private static htmlDir = __dirname + '/../../test/reports/html';
    private static jsonFile = CucumberReportExtension.jsonDir + '/cucumber_report.json';

    private static cucumberReporterOptions = {
        theme: 'bootstrap',
        jsonFile: CucumberReportExtension.jsonFile,
        output: CucumberReportExtension.htmlDir + '/cucumber_reporter.html',
        reportSuiteAsScenarios: true,
        launchReport: true,
        metadata: {
            'App Version':'1.0.0',
            'Test Environment': 'Development',
            Browser: 'Chrome  84.0.4147.105',
            Platform: 'Windows 10',
            Parallel: 'Scenarios',
            Executed: 'Local'
        }
    }

    public static CreateReportFile(dirName) {
        // Check of the directory exist
        if (!fs.existsSync(dirName))
            mkdirp.sync(dirName);
    }

    public static GenerateCucumberReport(){

        report.generate(CucumberReportExtension.cucumberReporterOptions);
    }

}

The dependencies listed in my package.json are as follows:

"dependencies": {
    "@types/jasmine": "^3.5.11",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.0.14",
    "faker": "^5.1.0",
    "jasmine": "^3.5.0",
    "lodash": "^4.17.20",
    "log4js": "^6.3.0",
    "log4js-protractor-appender": "^1.1.2",
    "mkdirp": "latest",
    "moment": "^2.28.0",
    "pg": "^8.3.3",
    "pg-hstore": "^2.3.3",
    "protractor": "^7.0.0",
    "qs": "^6.9.4",
    "stringinject": "^2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@types/chai": "^4.2.11",
    "@types/cucumber": "^6.0.1",
    "@types/load-json-file": "^5.1.0",
    "axios": "^0.19.2",
    "babel-loader": "^8.1.0",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "chai-smoothie": "^0.3.2",
    "core-js": "^3.6.5",
    "cucumber": "^6.0.5",
    "cucumber-html-reporter": "^5.2.0",
    "https": "^1.0.0",
    "k6": "0.0.0",
    "load-json-file": "^6.2.0",
    "multiple-cucumber-html-reporter": "^1.16.3",
    "nodejs-nodemailer-outlook": "^1.2.3",
    "protractor-cucumber-framework": "^6.2.1",
    "request": "^2.88.2",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "tslint-etc": "^1.13.6",
    "typescript": "^3.9.7",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}
typescriptprotractorcucumberjs

Answer №1

After examining the specified type for the Options object that is sent to the report.generate function, it is clear that they are expecting a union of string literals for the theme property.

The theme you selected, 'bootstrap', is indeed one of those possibilities. However, TypeScript mistakenly identified it as just a generic string rather than the specific string literal 'bootstrap'. To correct this, you can use as const to indicate to TypeScript that it should be treated as a literal:

private static cucumberReporterOptions = {
     theme: 'bootstrap' as const,
     ....

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

Can you explain how the "reduce" function can be implemented using an interface in TypeScript?

Can you explain the "reduce" function using an interface in TypeScript? https://i.stack.imgur.com/X1VxL.png ...

typescriptinterfacereduce

Steps for personalizing the dataset on a PrimeNG bar graph

I'm currently working with primeng in an Angular project and I need to create a bar chart where the last two horizontal bars have different colors. Right now, the last two bars are incorrectly being assigned to represent dogs and cats. My goal is to ...

angulartypescriptprimeng

You must use the 'new' keyword in order to invoke the class constructor

Although similar questions have been asked before, my situation differs from the typical scenarios. I have a basic base class named CObject structured as follows: export class CObject extends BaseObject { constructor() { super(); } sta ...

javascriptnode.jstypescript

Using PersistedModel.create(Array) will generate an object containing properties that are numbered sequentially

Here is a piece of code that makes a call to a Loopback API method with an array of values. The input data is correct, no errors are thrown by the API, and the subscribe block executes as expected. const newStudentGroups = selectedStudentI ...

typescriptloopbackjsangular-loopback

Sorting and dividing an Array using Angular

Forgive me in advance if this sounds like a naive question, as Angular and Typescript are not my strong suits. I am assisting a friend with an issue that I can't seem to overcome. I have an array of players that includes details such as first name an ...

javascriptarraysangulartypescript

Tips for disentangling code from types in Typescript

Instead of intertwining code and types like the example below: const compar8 : boolean | error = (action: string, n: number) => { switch(action) { case 'greater': return n > 8; case 'less': ...

javascripttypescripttypestypescript-typingstranspiler

Issue with Material UI Table not refreshing correctly after new data is added

Currently, I am utilizing a Material-UI table to display information fetched from an API. There's a form available for adding new entries; however, the problem arises when a new entry is added - the table fails to update or re-render accordingly. For ...

reactjstypescriptmaterial-ui

Toggle Button in Angular upon Form Changes

I am currently working on a bug that involves preventing users from saving data if they have not entered any information in the form. The form structure is as follows: private buildAddressPopupForm() { this.form = this.fb.group({ roles: [''], ...

angulartypescript

Encountering 'no overload matches this call' while developing a useReducer using React with Typescript

import { useCallback, useReducer } from "react"; const ARTIST_REDUCER_TYPES = { ADD: "ADD", }; const artistArray = [...Object.values(ARTIST_REDUCER_TYPES)] as const; type ActionReturnedTypes = (typeof artistArray)[number]; type Re ...

reactjstypescript

Having trouble connecting with the SafariDriver extension

During my e2e testing of an AngularJS web-app using protractor on Chrome and Firefox, I encountered an issue when attempting to include Safari in the array. The error message displayed was: "Unable to establish a connection with the SafariDriver extension ...

seleniumprotractorangularjs-e2e

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

I'm struggling to customize the appearance of child th elements using the TableHead component from MaterialUI. While I've been successful in modifying various properties, I'm facing difficulty in changing the hover color. Below is the snipp ...

csstypescriptmaterial-ui

How can I capture the click event on the oktext in Ionic?

When using Ionic, I have a select button with options for okText and cancelText. The issue I am facing is that when I click on okText, the menu closes as expected due to this attribute. However, I am interested in implementing it through click events. Belo ...

angulartypescriptionic-frameworkionic3

Guide on filtering FlatList Data in react native by selecting multiple categories from an array

User Interface Image I am looking to implement a filter functionality in the FlatList data based on top categories, where the filter button allows for multiple selections. The FlatList data is stored in the HotelData array, and the categories are also re ...

reactjstypescriptreact-nativereact-hooksreact-redux

TS18047 jest error: "object may be null"

I'm currently working on a test (jtest) for an angular component, but it keeps failing due to this particular error. Any thoughts on how to resolve this? :) it("should require valid email", () => { spectator.component.email.setValue( ...

angulartypescriptjestjs

Steps for generating a unit test for code that invokes scrollIntoView on an HTML element

I'm currently working on an Angular component where I have a method that involves scrolling through a list of elements known as "cards" based on certain criteria. Despite my efforts to write unit tests for this method using the Jasmine framework, I&ap ...

angulartypescriptunit-testingjasmine

Ways to efficiently populate HTML elements with JSON data

I am working on grasping the concept of functional programming. My understanding so far is that it involves encapsulating everything into functions and passing them around. For instance, in my current example, I am attempting to fetch data from a RESTApi a ...

javascripttypescriptdomfunctional-programming

Guide on incorporating a YouTube iframe in React with Typescript

It appears that Typescript is posing some challenges for me in this scenario. Here's the code snippet I am trying to include: <iframe width="560" height="315" src="https://www.youtube.com/embed/BLAH?showinfo=0" frameBorder="0" ...

reactjstypescriptyoutube

Unable to upload any further verification documents to Stripe Connect bank account in order to activate payouts

Query - Which specific parameters should I use to generate the correct token for updating my Stripe bank account in order to activate payouts? I've attempted to activate payouts for my Stripe bank account by using a test routing and account number (t ...

javascripttypescriptstripe-payments

Which RxJS operators necessitate unsubscription?

It can be confusing to know which operators in RxJS must be unsubscribed from to prevent subscription leaks. Some, like forkJoin, complete automatically, while others, such as combineLatest, never complete. Is there a comprehensive list or guideline availa ...

javascripttypescriptrxjs

Pagination feature in MUI DataGrid table is malfunctioning

I'm struggling to get the pagination feature to work in my Material UI DataGrid component, but I'm hitting a roadblock: https://i.stack.imgur.com/eT7s7.gif The console is not showing any errors. Here is the code for my component: import { ...

reactjstypescriptmaterial-uidatagrid