How to write tests with Typescript and jest

CarlosAndress — Fri, 12 Apr 2024 18:24:29 +0000

Step 1: Set Up Your TypeScript Project

Create a new folder

mkdir test
cd test

Create a new TypeScript project.

Initialize your project and create a package.json file if you don't have one already:

pnpm init

pnpm init -y

Install TypeScript and Jest as development dependencies:

npm i jest typescript ts-jest ts-node @types/jest @types/node -D

pnpm add jest typescript ts-jest ts-node @types/jest @types/node -D

Step 2: Configure TypeScript

Create a tsconfig.json file to configure TypeScript.
You can use the tsc --init command or create it manually.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src"
  }
},
  "include": [
    "src"
  ]

Create a jest.config.ts file to configure Jest

pnpm create jest

import type {Config} from 'jest';

  const config: Config = {
  collectCoverage: true,
  coverageProvider: "v8",
  preset: 'ts-jest',
  roots: [
     "<rootDir>"
   ],
  testEnvironment: "node",
  verbose: true,
  transform: {}
}

Create a src directory for your TypeScript source files and a tests directory for your test files.

Creates a file insider the folder src you migh named operation.ts

export function Sum(a: number, b: number): number {
  return a + b;
}

import the file we created in the test location into a new file named operation.test.ts or operation.spec.ts

import { Sum} from "../src/operation";

describe("Math functions", () => {
  test("should add two numbers correctly", () => {
    expect(add(1, 2)).toEqual(3);
  });
});

Step 3: Run Your Tests

Add a script to your package.json to run the tests:

"scripts": {
  "test": "jest"
}

Run your tests using:

npm run test

pnpm run test

Parameter 'element' implicitly has an 'any' type.

CarlosAndress — Fri, 08 Mar 2024 07:23:01 +0000

To solve the error we must only type the best way this particular error happened to me with useRef creating a slider here I leave an example of code.

This is the part of the code that was causing the error and I solved it this way I summarized it so that it was not so long.

const Slider = () => {
  const elementRef = useRef<HTMLInputElement>(null);

  const sliderRight=(element:HTMLElement )=>{
    element.scrollLeft += screenWidth - 110
  }
  const sliderLeft=(element: HTMLElement)=>{
    element.scrollLeft -= screenWidth -110
  }


  return (
    <div>
      <div>
        <HiChevronLeft className="hidden md:block text-white text-[30px] absolute
        mx-8 mt-[150px] cursor-pointer" onClick={() => sliderLeft(elementRef.current as HTMLElement)}/>

        <HiChevronRight className="hidden md:block text-white text-[30px] absolute
        mx-8 mt-[150px] cursor-pointer right-0" onClick={() => sliderRight(elementRef.current as HTMLElement)}/>

      </div>
  )

Forem: CarlosAndress

How to write tests with Typescript and jest

Parameter 'element' implicitly has an 'any' type.