Category: JavaScript

Categories
JavaScript Answers

How to fix Jest ‘encountered an unexpected token import’ error with JavaScript?

Labrador retriever puppy walking on green grass

To fix Jest ‘encountered an unexpected token import’ error with JavaScript, we set the Jest config to allow modules.

For instance, in jest.config.js, we write

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  roots: ["./src"],
  transform: { "\\.ts$": ["ts-jest"] },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  globals: {
    "ts-jest": {
      tsConfig: {
        allowJs: true,
      },
    },
  },
};

to allow extensions for modules by setting moduleFileExtensions to ["ts", "tsx", "js", "jsx", "json", "node"].

We set allowJs to true to allow JavaScript code to run including modules.

And we set transform to { "\\.ts$": ["ts-jest"] } to transform them with ts-jest so they can be run with Jest.

Categories
TypeScript Answers

How to loop through an array in TypeScript?

Labrador retriever puppy walking on green grass

To loop through an array in TypeScript, we can use a for-of loop.

For instance, we write

for (const product of products) {
  console.log(product.productDesc);
}

to loop through the products array with a for-of loop.

In it, we log the productDesc property of the products object entry being looped through, which is stored in product.

Categories
Angular Answers

How to make button disabled in Angular?

Labrador retriever puppy walking on green grass

To make button disabled in Angular, we set the [disabled] attribute.

For instance, we write

<button [disabled]="!editmode ? 'disabled' : null" (click)="loadChart()">
  <div class="btn-primary">Load Chart</div>
</button>

to set the [disabled] attribute to 'disabled' if editmode is false.

Otherwise, we set it to null to keep the button enabled.

Categories
TypeScript Answers

How to import image with TypeScript?

Labrador retriever puppy walking on green grass

To import image with TypeScript, we can use declare to declare the type for image files.

For instance, we write

declare module "*.png" {
  const value: any;
  export = value;
}

to declare the type for modules with the .png extension.

We just allow any property to be exported with

const value: any;
export = value;

And then we can import .png files without errors since png files are recognized by the TypeScript compiler after we added the module declaration.

Categories
React Answers

How to pass state to another component with react-router-dom v6 useNavigate hook?

closeup photo of yellow Labrador retriever puppy

To pass state to another component with react-router-dom v6 useNavigate hook, we can call navigate with an object as the 2nd argument.

For instance, we write

import { Link, useNavigate } from "react-router-dom";

const ComponentA = (props) => {
  const navigate = useNavigate();

  const toComponentB = () => {
    navigate("/componentB", { state: { id: 1, name: "sabaoon" } });
  };

  return (
    <>
      <div>
        <a onClick={() => toComponentB()}>Component B</a>
      </div>
    </>
  );
};

export default ComponentA;

to call navigate with the "/componentB" URL path and an object that we want to pass to the component that renders when we go to /componentB.

Then in ComponentB, which is rendered when we go to /componentB, we get the values from the useLocation hook by writing

import { useLocation } from "react-router-dom";

const ComponentB = () => {
  const location = useLocation();

  return (
    <>
      <div>{location.state.name}</div>
    </>
  );
};

export default ComponentB;

We call the useLocation hook to return the object that we passed in as the 2nd argument of navigate in ComponentA.

And then we get the properties from the location object.