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

Encountering an Issue: The formGroup function requires an instance of a FormGroup. Kindly provide one

I am a beginner with Angular 2 and despite reviewing numerous stack overflow answers, I still can't resolve my issue. I have recently started learning about angular reactive forms and wanted to try out my first example but I'm facing some diffic ...

angulartypescriptangular-reactive-formsformgroups

What could be causing my "Swiper" component to malfunction in a TypeScript React project?

In my React project, I decided to incorporate the Swiper library. With multiple movie elements that I want to swipe through, I began by importing it as follows: import Swiper from 'react-id-swiper'; Utilizing it in my code like this: <div cla ...

reactjstypescriptswiper.js

What is the process for linking read-only methods to Redux object instances?

Let's say I have a "user" object stored in redux, with fields for first name and last name (interface User { firstName : string, lastName : string} if using typescript). After retrieving a user from redux, I want to obtain the full name of the user by ...

javascripttypescriptredux

When organizing data, the key value pair automatically sorts information according to the specified key

I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...

javascriptangulartypescript

Encountering the "encoding" Module Error when Implementing Nextjs-13 with Supabase

I encountered an issue while trying to utilize Supabase for handling data insertion/retrieval from my form. Upon compilation, I received an error stating that the encoding module was not found. Despite attempting cache cleaning and re-installation of npm m ...

typescriptnpmnext.jssupabase

Typescript compiler still processing lib files despite setting 'skipLibCheck' to true

Currently, I am working on a project that involves a monorepo with two workspaces (api and frontEnd). Recently, there was an upgrade from Node V10 to V16, and the migration process is almost complete. While I am able to run it locally, I am facing issues w ...

node.jstypescriptnode-modulestsc

Do changes in Input fields reflect in the parent component?

I was under the impression that I could share data with child components using @Input() directive and communicate data back to the parent component with @Output() along with the appropriate emit. However, I recently discovered that modifications made to th ...

angulartypescript

What is the best way to output a JSX element using an inline switch statement?

I have been attempting to use an inline switch in order to return an element, but all I am getting is an empty <span> </span>. What could be the issue here? getRowTdForHeader: (header: string, entry: response) => { return (< ...

javascriptreactjstypescript

What is the process of expanding types definitions by incorporating custom types?

I added these custom types to my project. The file structure can be found here. However, these types do not contain certain useful types such as ClientState. I want to include the following enum in those types: enum ClientState { DISCONNECTE ...

typescriptwebpackvoximplant

Transitioning from Angular Http to HttpClient: Overcoming Conversion Challenges

Currently, I am in the process of converting my old Angular app from Http to HttpClient. While working on the service.ts section, I encountered an error that I am struggling to resolve: ERROR Error: Cannot find a differ supporting object '[object Ob ...

angulartypescripthttpserviceobservable

Validate the data type based on the property

I have a CARD type that can be either a TEXT_CARD or an IMAGE_CARD: declare type TEXT_CARD = { type: "paragraph" | "h1" | "h2"; text: string; }; declare type IMAGE_CARD = { type: "img"; src: string; orient ...

typescriptsveltesveltekit

Angular - Using HttpClient for handling POST requests

The example provided in the official Angular HttpClient documentation demonstrates how to make a POST request to a backend server. /** POST: add a new hero to the database */ addHero (hero: Hero): Observable<Hero> { return this.http.post<Hero&g ...

angulartypescripthttppost

Input for uncomplicated changing identifier

I am looking to create types for dynamic keys that will be of type number. I have two similar types defined as follows: type UseCalculatePayments = () => { totalPayments: number; aggregate: number; condition: boolean; }; type UseCalculateCommissio ...

javascriptreactjstypescript

Is there a way to combine multiple array objects by comparing just one distinct element?

Is there a way to combine these two arrays into one? array1 = [ { image: 'image1', title: 'title1' }, { image: 'image2', title: 'title2' }, { image: 'image3', title: 'title3' }, ]; array2 = ...

javascripttypescript

Is there a way to verify within the "if" statement without repeating the code?

Is there a way in javascript (or typescript) to prevent redundant object rewriting within an if statement condition? For example: if (A != null || A != B) { // do something here } // can it be done like this: if (A != null || != B) { // avoid repeating ...

javascripttypescriptif-statement

Can the Date class be expanded by overloading the constructor method?

In my dataset, there are dates in different formats that Typescript doesn't recognize. To address this issue, I developed a "safeDateParse" function to handle extended conversions and modified the Date.parse() method accordingly. /** Custom overload ...

angulartypescript

Open the JSON file and showcase its contents using Angular

I am attempting to read a JSON file and populate a table with the values. I've experimented with this.http.get('./data/file.json') .map(response => response.json()) .subscribe(result => this.results =result, function(error) ...

javascriptjsonangulartypescript

steps for signing in to garmin account with javascript

Attempting to set up an Oauth1 login for Garmin using Angular2 and standard http calls, but encountering a pre-flight OPTIONS call error on the initial request to oauth/request_token path. It seems like CORS is not enabled or something similar. Has anyone ...

javascriptangulartypescriptoauthgarmin

`Is there a way to assign multiple parameters to HttpParams within Angular 5?`

I'm attempting to send multiple parameters to HttpParams in Angular 5 using the approach below: paramsObject: any params = new HttpParams(); for (let key in paramsObject) { params.set(key, paramsObj ...

angulartypescriptangular5

Leveraging the power of TypeScript and Firebase with async/await for executing multiple

Currently, I am reading through user records in a file line by line. Each line represents a user record that I create if it doesn't already exist. It's possible for the same user record to be spread across multiple lines, so when I detect that it ...

typescriptfirebasefirebase-realtime-databaseasync-await