The Jest type definitions seem to be malfunctioning in this TypeScript project

Recently, I began a new Typescript project utilizing GTS. While the typings are functioning correctly for regular *.ts files, I am encountering difficulties in getting *.spec.ts files to work.

Issue

Each jest function is being flagged as red by ESLint within VS Code with the message stating "(describe | it | expect) is not defined". Despite my attempts of including and excluding files, adding types, and even copying from other projects, the problem persists.

Below is my current tsconfig:

{
  "compileOnSave": false,
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "sourceMap": true,
    "declaration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "types": ["node", "jest"]
  },
  "exclude": ["**/*.spec.ts"],
  "include": ["src/**/*.ts", "tests/**/*.ts"]
}

The directory structure is quite straightforward

  • src (containing ts files)
  • tests (housing all spec files)
  • tsconfig.json

Key Packages:

"@types/jest": "^26.0.14",
"@types/node": "^13.11.1",
"gts": "^2.0.2",
"jest": "^26.4.2",
"tslint": "^6.1.3",
"typescript": "^4.0.3"

Is there a glaring mistake in my configuration? Should I create two separate configs, one for ts files, and the other for spec files?

typescriptjestjstslintgts

Answer №1

The issue that was causing errors to appear turned out to be related to the ESLint configuration. I made the necessary changes in the .eslintrc.json file and the errors disappeared:

"env": {
    "browser": true,
    "es6": true,
    "jest": true,
    "node": true
  },

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

When using Material-UI with TypeScript, an error is thrown stating that global is not defined

After running the following commands: npm install --save react react-dom @material-ui/core npm install --save-dev webpack webpack-cli typescript ts-loader @types/react @types/react-dom I transpiled main.tsx: import * as React from "react"; import * as R ...

reactjstypescriptglobalmaterial-uireferenceerror

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

javascripthtmlangulartypescriptbootstrap-modal

Attempting to use a string as an index for the type `{ firstName: { inputWarning: string; inputRegex: RegExp; }` is not allowed

const checkRegexSignUp = { firstName: { inputWarning: "only letters", inputRegex: /^[a-z ,.'-]+$/i }, lastName: { inputWarning: "only letters", inputRegex: /^[a-z ,.'-]+$/i }, } const change = (e: ChangeEvent<HT ...

reactjsregextypescript

Having trouble accessing specific results using Firestore's multiple orderBy (composite index) feature

I am facing an issue with a query that I run on various data types. Recently, one of the collections stopped returning results after I included orderBy clauses. getEntitiesOfType(entityType: EntityType): Observable<StructuralEntity[]> { const col ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

Ways to categorize items retrieved from an HTTP request to the backend in Angular

When making a call to the backend using this http request: this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/)).subscribe(values => { this.studentObject = values; }); The studentObject is structured as shown below: { recor ...

javascriptangulartypescript

extracting the HTML content from JavaScript and saving it into a standalone file

update When I click a link, a popup opens and I see all this HTML. The smile method is called when I click the link, and we append HTML in that method so that we can see it when the popup is opened. I moved it to a separate file something.component.html, ...

javascriptjqueryhtmlangularjstypescript

Issue with setting value using setState in TypeScript - what's the problem?

Every time I attempt to update the value of currentRole, it appears highlighted in red. Here is a screenshot for reference: const Container: React.FC<ContainerProps> = ({ children }) => { const [role, setRole] = useState<string>(); useE ...

reactjstypescript

Utilizing ngx-bootstrap to enhance Bootstrap dropdown functionality

I initially tried to set up ngx-bootstrap in Angular 2 by using the following command: npm install ngx-bootstrap bootstrap --save Then, I included these lines in angular-cli.json: "../node_modules/bootstrap/dist/css/bootstrap.min.css". In app.compone ...

angulartypescriptngx-bootstrap

Top method for waiting for material-ui ripples to finish before capturing snapshots

Seeking expert advice from the React Testing Library community on ensuring completion of a Material UI ripple animation before taking a snapshot. We've been experiencing inconsistent test results with our CI servers due to the animation finishing fas ...

reactjsjestjsmaterial-uireact-testing-library

Ways to help a child notice when a parent's variable changes

Looking for help with passing data to a child component? Check out this Plunker: http://plnkr.co/edit/G1EgZ6kQh9rMk3MMtRwA?p=preview @Component({ selector: 'my-app', template: ` <input #x /> <br /> <child [value] ...

angulartypescript

What sets apart module imports in JavaScript and Typescript?

Exploring the realm of Shadow DOM and Custom elements, I've encountered an interesting discrepancy between how JavaScript (JS) and TypeScript (TS) handle modular imports. Am I missing something here? My primary JS file has this structure... // impor ...

typescriptruntime-errores6-modulescustom-element

Developing a custom camera system for a top-down RPG game using Javascript Canvas

What specific question do I have to ask now? My goal is to implement a "viewport" camera effect that will track the player without moving the background I am integrating websocket support and planning to render additional characters on the map - movement ...

javascripttypescriptcanvashtml5-canvas

Dismiss the necessity of imports in Angular

I am facing an issue with using a library in Angular, specifically the cubing npm package. This library is designed to run in both the browser and node environments, with specific code for each. I want it to run in the browser, but when compiling with Angu ...

angulartypescriptnpm

Encountering difficulties with installing bootstrap-vue

While attempting to integrate Bootstrap-Vue into my project that includes Vuex, Vue-Router, TypeScript, and Babel, I encounter an error in the browser. To replicate docker run -it --rm -p 8080:8080 node:17.7.2-alpine yarn global add @vue/cli vue create ...

typescriptvue.jsbootstrap-vue

Incorporate a Custom Icon into NbSelect

I am currently utilizing Nebular in a project, where multiple dropdowns are being used as shown below: <nb-select fullWidth placeholder="Office" formControlName="office"> <nb-option value="Office_A"&bt;Office A</n ...

angulartypescriptnebular

Using a dictionary of objects as the type for useState() in TypeScript and React functional components

I am in the process of transitioning from using classes to function components. If I already have an interface called datasets defined and want to create a state variable for it datasets: {[fieldName: string]: Dataset}; Example: {"a": dataset ...

reactjstypescriptreact-hooksuse-state

imported classes from a module cannot be accessed within the same module

Here is some TypeScript code that I wrote: Within my module, I am importing a library called ts-events. import {SyncEvent} from 'ts-events' module MyModule{ export class MyService{ } } In the same module but in a different file, I'm ...

angularjstypescriptservicetypescript-typings

Guide to transforming a TaskOption into a TaskEither with fp-ts

I have a method that can locate an item in the database and retrieve a TaskOption: find: (key: SchemaInfo) => TO.TaskOption<Schema> and another method to store it: register: (schema: Schema) => TE.TaskEither<Error, void> Within my regis ...

typescriptfunctional-programmingfp-ts

Example of a floating undo bar using a dynamic function in a Vuex store module

Issue Overview Trigger the mutation or action of Vuex store module A to execute an external function. This external function can belong to another Vuex store module (e.g. B). A should store a reference to the external method (e.g. mutation or action from ...

typescriptvue.jsvuexvuex-modules

What is the appropriate method to send a single observable problem to two Observable<boolean>?

Two functions are at play here: this.baseAuthentification.canActivate(route, state) and this.haveDroits(). Both of them return observables. I am looking to return an observable in case this.baseAuthentification.canActivate(route, state) returns false. If ...

angulartypescriptrxjs