If you want to set multiple root directories in your tsconfig.json file, you can do so using the rootDirs option like this:

{
  "compilerOptions": {
    "rootDirs": [
      "app",
      "test"
    ]
  }
}

You can find more information about this feature in the Typescript documentation under the section titled Virtual Directories with rootDirs: Module Resolution

To streamline your testing process, eliminate tests from your tsconfig file. Utilize mocha for testing instead, as it does not rely on tsconfig to locate the tests.

In your package configuration file, consider using the following setup:

"mocha": "mocha test/ --compilers ts:ts-node/register --recursive"

Within tsconfig.json, include the following:

"include": [
    "src/**/*.ts"
],

For more guidance on setting up tsconfig with a spec/test folder, check out this resource.

What do you think about completely separating the tests? How about organizing it like this:

- scripts
    - tsconfig.json
    - src
        - app.ts
    - dist
        - app.js
- tests
    - tsconfig.json
    - src
        - appTest.ts
    - bin
        - appTest.js

For instance, the scripts/tsconfig.json will have:

"compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    ...
}

And the tests/tsconfig.json will look like this:

"compilerOptions": {
    "outDir": "bin",
    "rootDir": "src",
    ...
}

---

Update

I tested this solution in webstorm and found two options:

(1) Tests files can import from scripts/dist:

scripts/tsconfig.json:

"compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "declaration": true
}

tests/tsconfig.json:

"compilerOptions": {
    "outDir": "bin",
    "rootDir": "src"
}

tests/src/apptest.ts:

import * as app from "../../scripts/dist/app";

...

The resulting structure in tests/bin will be:

- tests
    - bin
        - apptest.js

Although refactoring in scripts won't automatically update

tests/src/apptest.ts</code, it will prompt you to make the necessary changes to ensure successful compilation.</p>

<p>(2) Tests files can import from <code>scripts/src

:

The scripts/tsconfig.json file doesn't require the declaration option since the source is used directly.

tests/src/apptest.ts:

import * as app from "../../scripts/dist/src";

...

Refactoring the source will automatically update the test files, but the output in tests/bin will appear like this:

- tests
    - bin
        - scripts
            - src
                - app.js
        - tests
            - src
                - apptest.js

If the structure in tests/bin is acceptable, this approach eliminates the need for additional tools.

When faced with a similar challenge, I utilized gulp to break down the compilation process into two distinct steps:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemap = require('gulp-sourcemaps');
var replace = require('gulp-replace');

var path = require('path');
var merge = require('merge2');

var paths = {
  source: "source/",
  output: "dist/",
  spec: "spec/"
}

gulp.task('compile:typescript', function () {
  var project = ts.createProject('tsconfig.json', {
    typescript: require('typescript')
  });

  var tsResult =  gulp.src(paths.source + '**/*.ts')
    .pipe(sourcemap.init())
    .pipe(project());

  return merge([
    tsResult.dts.pipe(gulp.dest(paths.output)),
    tsResult.js //fix issue with relative source path
      .pipe(sourcemap.write('.', { 
        sourceRoot: function (file) {              
          var relative = path.relative(file.path, path.join(__dirname, "source"));
          var relativeSource = path.join(relative, 'source')
          return relativeSource;
        }
      }))
      .pipe(gulp.dest(paths.output))
  ]);
});

gulp.task('compile:tests', function () {
  var project = ts.createProject('tsconfig.json', {
    typescript: require('typescript')
  });

  var tsResult = gulp.src(paths.spec + '**/*spec.ts')
    .pipe(sourcemap.init())
    .pipe(project());

  return tsResult.js //fix issue with relative source path
    .pipe(sourcemap.write('.', {
      sourceRoot: function (file) {
        var relative = path.relative(file.path, path.join(__dirname, "spec"));
        var relativeSource = path.join(relative, 'spec')
        return relativeSource;
      }
    }))
    .pipe(replace(/(require\('\..\/source\/)/g, 'require(\'..\/dist\/'))
    .pipe(gulp.dest(paths.spec));
});

By following this method, your test source-code will import from the actual source files, ensuring accurate refactoring.

The source code is compiled into the dist folder, while the test files are compiled from the spec folder and saved in the same location. During the compilation of the spec files, the import paths are corrected to link to the compiled output using gulp-replace.

There were some additional considerations; in the past, the outDir in vscode could only point to one folder. To enable breakpoints in the tests, the spec js files had to be placed next to the ts files. This limitation may no longer apply after recent updates, although I have not tested it.

For a demonstration of the refactoring process, refer to the following link:

https://i.sstatic.net/EBgTm.gif

I stumbled upon a straightforward solution by setting up an npm script that both compiles and eliminates unnecessary files/folders in the lib directory.

To get rid of the test folder in your lib directory post TypeScript compilation, add the below script to your package.json file:

"scripts": {
    "build": "./node_modules/.bin/tsc && rm -r ./lib/test",
},

Quick note: This answer is tailored for those using Mocha as their test tool.

Important information is scattered across multiple pages.

Initially, you can find a key detail on the official Mocha homepage:

--require , -r Make sure to load a module before accessing the user interface or test files.

This comes in handy when dealing with: Compilers like ... TypeScript via ts-node (using --require ts-node/register)

Consequently, install ts-node using npm install ts-node --save-dev.

---

Furthermore, insights can be found on the Mocha wiki.

Although not directly quoted, the command you need to execute is:

$ mocha --require ts-node/register "test/**/*.ts"

Your package.json might have a configuration like this:

  "scripts": {
    "pretest": "npx tsc",
    "test": "mocha './test/**/*.ts' --require ts-node/register --recursive"
  },

As for your tsconfig.json file, it could resemble the following:

  "include": [
    "./src"
  ]

It's unnecessary to incorporate your /tests folder in the transpilation process. Also, since you're directly running .ts test and source files, there's no need for a sourcemap; your line numbers and callstack will still be functional.