'Import .ts file fails with no overload matches this call

I have generated a full stack nodejs/react project with yo teams generator in order to build a custom app for microsoft teams application. I want to make it TDD approach. I use mocha for this purpose. I have configured mocha to run .ts files. The problem is when I try to import the server.ts file, built by the yo teams generator, in order to test the api calls. Below is the code and the error I get.

src/server/server.ts

import * as Express from "express";
import * as http from "http";
import * as path from "path";
import * as morgan from "morgan";
import { MsTeamsApiRouter, MsTeamsPageRouter } from "express-msteams-host";
import * as debug from "debug";
import * as compression from "compression";

// Initialize debug logging module
const log = debug("msteams");

log("Initializing Microsoft Teams Express hosted App...");

// Initialize dotenv, to use .env file settings if existing
require("dotenv").config();

// The import of components has to be done AFTER the dotenv config
// eslint-disable-next-line import/first
import * as allComponents from "./TeamsAppsComponents";

// Create the Express webserver
const express = Express();
const port = process.env.port || process.env.PORT || 3007;

// Inject the raw request body onto the request object
express.use(Express.json({
    verify: (req, res, buf: Buffer, encoding: string): void => {
        (req as any).rawBody = buf.toString();
    }
}));
express.use(Express.urlencoded({ extended: true }));

// Express configuration
express.set("views", path.join(__dirname, "/"));

// Add simple logging
express.use(morgan("tiny"));

// Add compression - uncomment to remove compression
express.use(compression());

// Add /scripts and /assets as static folders
express.use("/scripts", Express.static(path.join(__dirname, "web/scripts")));
express.use("/assets", Express.static(path.join(__dirname, "web/assets")));

// routing for bots, connectors and incoming web hooks - based on the decorators
// For more information see: https://www.npmjs.com/package/express-msteams-host
express.use(MsTeamsApiRouter(allComponents));

// routing for pages for tabs and connector configuration
// For more information see: https://www.npmjs.com/package/express-msteams-host
express.use(MsTeamsPageRouter({
    root: path.join(__dirname, "web/"),
    components: allComponents
}));

// Set default web page
express.use("/", Express.static(path.join(__dirname, "web/"), {
    index: "index.html"
}));

// Set the port
express.set("port", port);

// Start the webserver
// http.createServer(express).listen(port, () => {
//     log(`Server running on ${port}`);
// });

export const app = express.listen(port, function() {
    log(`Server running on ${port}`);
});

My testing file. If I do not import the server file, runs successfully

import request = require("supertest");

import { app } from "../src/server/server";

describe("testing the typescript", function() {
    it("checks if mocha runs with typescript", function() {
        console.log("Hello world");
    });

    it("makes an http request to app", function() {
        request(app).get("/")
    });
});

tsconfig.json

{
    "compilerOptions": {
  
      /* Language and Environment */
      "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
  
      /* Modules */
      "module": "commonjs",                                /* Specify what module code is generated. */

      "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
      "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
  
      /* Type Checking */
      "strict": true,                                      /* Enable all strict type-checking options. */
      "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
    }
  }

src/server/tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "strictNullChecks": true,
        "jsx": "react",
        "sourceMap": true,
        "experimentalDecorators": true,
        "resolveJsonModule": true,
    },
    "exclude": [
        "node_modules"
    ]
}

package.json

{
  "name": "testbot",
  "version": "0.0.1",
  "description": "Generated by yoteams, https://aka.ms/yoteams",
  "scripts": {
    "start": "node dist/server.js",
    "build": "gulp build",
    "manifest": "gulp manifest",
    "debug": "gulp serve --debug",
    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
    "test": "NODE_ENV=test mocha --check-leaks -r tsconfig-paths/register -r ts-node/register \"test/**/*.spec.ts\""
  },
  "dependencies": {
    "@fluentui/react-northstar": "~0.58.0",
    "@microsoft/teams-js": "~1.11.0",
    "axios": "^0.21.1",
    "botbuilder": "4.14.1",
    "botbuilder-dialogs": "4.14.1",
    "compression": "1.7.4",
    "debug": "4.3.2",
    "dotenv": "10.0.0",
    "express": "4.16.4",
    "express-msteams-host": "1.9.0",
    "express-session": "1.15.6",
    "morgan": "1.9.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@types/chai": "^4.3.0",
    "@types/debug": "4.1.7",
    "@types/express": "4.16.0",
    "@types/express-session": "1.15.10",
    "@types/mocha": "^9.1.0",
    "@types/morgan": "1.7.35",
    "@types/node": "^17.0.23",
    "@types/react": "16.8.10",
    "@types/react-dom": "16.8.3",
    "@types/supertest": "^2.0.12",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "browser-sync": "^2.26.5",
    "chai": "^4.3.6",
    "eslint": "^7.18.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "fancy-log": "^1.3.3",
    "file-loader": "6.1.1",
    "fork-ts-checker-webpack-plugin": "6.3.3",
    "gulp": "4.0.2",
    "mocha": "^9.2.2",
    "nodemon": "^2.0.15",
    "supertest": "^6.2.2",
    "ts-loader": "9.2.5",
    "ts-node": "^10.7.0",
    "tsconfig-paths": "^3.14.1",
    "typescript": "^4.0.3",
    "typestyle": "2.1.0",
    "vinyl": "2.2.1",
    "webpack": "5.52.1",
    "webpack-node-externals": "^3.0.0",
    "yargs": "^16.0.3",
    "yoteams-build-core": "^1.5.0",
    "yoteams-deploy": "^1.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "Firefox ESR"
  ],
  "engines": {
    "node": ">=12"
  }
}

And I get this error when I try npm test enter image description here enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source