Is it possible to set up tsc to compile test specifications specifically from a designated directory?

I have been working on integrating e2e tests into an Angular project that was not originally set up with @angular-cli, so I have been manually configuring most of it.

Currently, I am trying to define a script in the package.json file to transpile only the specs located in the tests/ folder to tests/compiled.

I attempted to follow the advice on this question: tsconfig.json - Only build ts files from folder. It suggests using --rootDir to specify the folder.

However, when I use this command: tsc --rootDir tests --outDir ./tests/compiled, it ends up compiling files from other directories like ./src. Additionally, I receive numerous TS6059 errors stating that rootDir should contain all source files.

For example: error TS6059: File 'C:/Users/Betalabs/Documents/Projetos/Engine-Frontend/src/vendor.browser.ts' is not under 'rootDir' 'tests'. 'rootDir' is expected to contain all source files.

The file structure is as follows. Note that the test specs (*.spec.ts) that I want to transpile are located in the tests/ folder.

(root)
-- src/
-- tests/
    -- compiled/
        -- (transpiled test files, ".js")
    -- helpers/
        -- (helper modules, ".ts")
    -- page-objects/
        -- (page objects, ".ts")
    -- forms.spec.ts
    -- filters.spec.ts
-- .gitignore
-- .tern-project
-- buildspec.yml
-- conf.js
-- package-lock.json
-- package.json
-- README.md
-- tsconfig.json
-- tsconfig.webpack.json
-- tslint.json
-- typedoc.json
-- webpack.config.js

This is my current tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "baseUrl": "./src",
    "paths": {
      "@angular/*": ["node_modules/@angular/*"]
    },
    "lib": [
      "dom",
      "es6",
      "es2017.object"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "jasmine",
      "hammerjs",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

Currently, my solution involves compiling all files and manually removing the unnecessary ones. It's quite messy! Could you offer any assistance with this issue?

Answer №1

If you want to compile those files, simply add the following line to your tsconfig file:

"include": ["tests"]

Another option would be to consider converting the project to use the ng cli for a smoother experience. Best of luck!

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

Using Typescript for testing React components: successfully passing an array of objects as props

My current approach involves passing an array of objects to mock component data for testing: const mockPackage = { id: '1232-1234-12321-12321', name: 'Mock Package', price: 8.32, description: 'Mock description', glo ...

Angular button will be disabled if the form control is empty

Is there a way to deactivate the search button when the text box is empty? I attempted to use the "disabled" attribute on the search button, but it didn't work. Here is my HTML code: <div class="col-md-5 pl-0"> <div class="in ...

Retrieve the JSON response file by redirecting through a WebRequest for downloading

I'm encountering difficulties in downloading files using WebRequest. The API seems simple enough. For example, I have the following address: When accessed, this link displays a label in the browser. By appending /labels, I can download a zip p ...

Guide to setting up an interface for returning events within a parameter

I am working with a component that has the following interface: interface IPreTicketListProps { onEditPreTicket: (preTicketId: string) => { preTicketId: string }; onCreateSuggestedOperation: (preTicketId: string) => { preTicketId: string }; } ...

Using restKit for handling specific JSON responses that do not directly correspond to the core data managed objects

Let's consider the scenario where we are working with an API that provides data in JSON format and we aim to utilize Restkit for mapping to two core data objects: "products" and "resources". These two objects have a many-to-one relationship, meaning o ...

Having trouble fixing the GAE Python error "Client_secrets.json file not found" in your app.yaml file?

Currently, I am working with GAE (python) to develop a web application. My main focus is on integrating the youtube API, but I seem to be encountering issues with the credentials not functioning correctly. Whenever I attempt to follow the "Retrieve my Upl ...

Deciphering and retrieving data from a JSON dictionary array using PHP

I am currently working with a JSON file that I need to send from my mobile application to PHP. On the PHP side, I aim to decode this JSON file and then insert its contents into a MySQL database. [{"Address":"Somewhere ", "Area":"Somwhe", "Created ...

Angular Back button event not triggering

I'm attempting to redirect the user to a specific URL when they click the back button in their browser. Here is the code snippet: constructor(private router: Router,private location: PlatformLocation) { let eventUrl = window.sessionSt ...

Callback function not being triggered in Jquery's getJson method

I am currently faced with a javascript conundrum. Below is the snippet of code that I have been working on: $.get("categories/json_get_cities/" + stateId, function(result) { //code here }, 'json' ); ...

Retrieve the location from a JSON object whenever there is a change in my location

My goal is to access nearby locations from a json URL based on my current location retrieved. I need to obtain the latitude and longitude of my location in order to find the nearest places. This process involves calling a method within onLocationChanged. ...

Angular Module without any components

The Angular modules documentation provides an example of a module that includes a template, a component, and a provider. This module is then imported into the root module and instantiated by using the element defined by the component like this: <app-co ...

Integrating new components into JSON data

I started by creating a JSON document in my code using the following syntax: let jsonData = []; To populate this document, I utilized the '.push()' method to add elements in this manner: jsonData.push({type: "example", value: "123"}); Eventua ...

Unable to create a connection to the server using websockets

Currently, I am working on a MEAN stack application. The communication between the client and server is handled through a combination of HTTP requests and websockets. Everything operates smoothly when running the application on localhost. However, upon at ...

Having a blast with Play, Scala, and Jerkson when suddenly encountering a frustrating `

Currently, I am experimenting with using jerkson in play framework with scala 2.10. My goal is to load data fixtures from json files using the "parse" function provided by jerkson. Unfortunately, this approach is not working as expected. I am implementing ...

Are the frameworks Vue, Angular, and React known for

During a conversation, I came across an interesting viewpoint criticizing popular frameworks such as Angular, Vue, and React. It was argued that these frameworks have a significant disadvantage: apart from the API part that interacts with the server's ...

I'm having trouble with npm install, it's not working as expected

After downloading node.js, I encountered errors when trying to run the CLI command npm install -g @angular/cli: npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/@angular%2fcli failed, reason: getaddrin ...

Searching for an Angular 7 alternative to Vue.js's "nextTick" function

In my Angular 7 project, I'm facing a situation where I need to automatically scroll to a specific section on the page after it has been fully rendered. The section is initially hidden using ngif and should only be scrolled to once it is visible in th ...

Check if the JSON response is returning an array with the values ["message", "Not Found"] in a rails application

When using an API to retrieve a JSON response, there is a variable URL that the user provides. In case of a spelling mistake in the URL, sometimes the JSON file cannot be found. I am trying to implement a simple conditional statement to check for a specifi ...

Guide to encapsulating an asynchronous function in a promise

I am in need of wrapping an asynchronous function within a promise to ensure synchronous execution. The reason behind this is that I must obtain a result from the asynchronous function before proceeding with the program's execution. Below is the rele ...

Struggling to get my React Typescript styled component slider to function within the component

Check out my demo here I created a simple react application using TypeScript and styled components. The main feature is a slider that adjusts the height of a red box. The red box is a styled component and I pass the height as a prop. Everything was fun ...