DEV Community: Abhishek P N

Setup Jest in a typescript React project

Abhishek P N — Mon, 05 Aug 2024 08:47:19 +0000

1. Install React testing library dependencies
run the following command to install React testing library dependencies (as dev dependencies)

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/dom @testing-library/user-event

if you prefer yarn

yarn add --dev @testing-library/react @testing-library/jest-dom @testing-library/dom @testing-library/user-event

2. Install Jest dependencies
run the following command to install jest dependencies (as a dev dependecies)

npm install --save-dev jest jest-environment-jsdom ts-jest @types/jest

if you prefer yarn

yarn add --dev jest jest-environment-jsdom ts-jest ts-node @types/jest

jest: Jest is a delightful JavaScript testing framework with a focus on simplicity. Jest will be used as the testing framework for your project. It allows you to write and run tests to ensure your code behaves as expected.
jest-environment-jsdom: Jest environment for JSDOM. JSDOM is a JavaScript implementation of the DOM (Document Object Model) that allows you to interact with HTML elements in a Node.js environment. Jest uses JSDOM to simulate a browser-like environment when running tests.
ts-jest: A TypeScript preprocessor with source map support for Jest. ts-jest allows Jest to understand TypeScript files and compile them before running tests. It ensures that your TypeScript code can be tested properly within the Jest environment.
ts-node: TypeScript execution and REPL for Node.js, with source map support. ts-node allows you to execute TypeScript files directly in Node.js without the need for precompilation. It's commonly used during development to run TypeScript code seamlessly.
@types/jest: TypeScript type definitions for Jest. These type definitions provide TypeScript with information about the Jest API, allowing for better type checking and editor support when writing Jest tests in TypeScript.

3. Configure Jest
Create a file named jest.config.ts in the root folder and add the following code configuration.

export { };
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts',
    '!**/vendor/**'],
  coverageDirectory: 'coverage',
  testEnvironment: 'jsdom',
  transform: {
    ".(ts|tsx)": "ts-jest"
  },

  coveragePathIgnorePatterns: [
    "/node_modules/",
    "/coverage",
    "package.json",
    "package-lock.json",
    "reportWebVitals.ts",
    "setupTests.ts",
    "index.tsx"
  ],
}

4.Integrate Jest with React testing Library
in the root folder create a file named jest.setup.tsenter the following line of code

import '@testing-library/jest-dom'
this means that we are importing everything from @testing-library/jest-dom package
in the jest.config.ts file we created earlier add another field of setupFilesAfterEnv

export { };
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts',
    '!**/vendor/**'],
  coverageDirectory: 'coverage',
  testEnvironment: 'jsdom',
  transform: {
    ".(ts|tsx)": "ts-jest"
  },

  coveragePathIgnorePatterns: [
    "/node_modules/",
    "/coverage",
    "package.json",
    "package-lock.json",
    "reportWebVitals.ts",
    "setupTests.ts",
    "index.tsx"
  ],
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

that's how we setup Jest in Typescript React applications!!
Happy Testing!!

-Abhishek

How to Add SVGs to Your React Native App: A Quick and Simple Guide

Abhishek P N — Mon, 05 Aug 2024 08:13:47 +0000

SVGs (Scalable Vector Graphics) are a fantastic way to add crisp, scalable graphics to your React Native app. They’re perfect for icons, logos, and illustrations because they look sharp at any size. Here’s a quick and easy guide to help you get started with SVGs in React Native.

Step 1: Install the Necessary Packages
To use SVGs in React Native, you need the react-native-svg library. If you’re using Expo, you’re already set! For React Native CLI users, follow these steps:

Open your terminal.

Run the following command:

npm install react-native-svg

yarn add react-native-svg

For React Native versions 0.60 and above, this library will be automatically linked. For older versions, you might need to link it manually:

react-native link react-native-svg

Step 2: Import SVG Components
In your React Native component, import Svg and other components from react-native-svg. Here’s how you do it:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Path } from 'react-native-svg';

Step 3: Add Your SVG Code
You can write SVG code directly in your component or use an SVG file. Here’s a simple inline SVG example:

const MySVGIcon = () => (
  <Svg width="100" height="100" viewBox="0 0 100 100">
    <Path
      d="M50 0 L100 50 L50 100 L0 50 Z"
      fill="blue"
    />
  </Svg>
);

Step 4: Use SVG Files (Optional)

If you prefer using SVG files, you can use react-native-svg-transformer.

Install the transformer:

npm install react-native-svg-transformer

yarn add react-native-svg-transformer

Create or update your metro.config.js file with:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

const {
  resolver: { sourceExts, assetExts },
} = defaultConfig;

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
};

module.exports = mergeConfig(defaultConfig, config);

Import your SVG file like this:

import React from 'react';
import { View } from 'react-native';
import MyIcon from './path/to/icon.svg'; // Your SVG file path

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <MyIcon width={100} height={100} />
  </View>
);

export default App;

Step 5: Customize and Enjoy!
You can customize your SVGs by adjusting their size and colors:

const MySVGIcon = ({ width = 100, height = 100, color = 'blue' }) => (
  <Svg width={width} height={height} viewBox="0 0 100 100">
    <Path
      d="M50 0 L100 50 L50 100 L0 50 Z"
      fill={color}
    />
  </Svg>
);

Wrapping Up
Adding SVGs to your React Native app is a breeze and adds a polished look to your user interface. Whether you choose to use inline SVG code or import SVG files, you’ll have sharp, scalable graphics that enhance your app's design.

Dive into your project and start integrating those SVGs today. Happy coding!

-Abhishek

ng-test barrel : An NPM package to generate Skeleton for Angular spec files

Abhishek P N — Thu, 20 Jul 2023 06:24:23 +0000

Introducing ng-test-barrel: The Ultimate NPM Plugin for Angular Projects with Jest!

👋 Hey Angular Developers,

Are you tired of spending precious time creating spec files in Jest for your Angular projects? Say goodbye to tedious manual work and welcome the Angular Test Barrel, the ultimate NPM plugin that generates a barebone structure for your Angular code in no time!

🎉 Why Choose Angular Test Barrel?

Angular Test Barrel was meticulously crafted with simplicity and efficiency in mind. It streamlines the process of creating Jest spec files into your Angular projects, enabling you to focus on writing robust tests instead of dealing with tedious manual task of creating and initialising the test suite. Here are some of the key benefits:

Rapid Setup: With a single command, Angular Test Barrel sets up spec files tailored specifically for Angular, saving you hours of manual work.

Angular-Specific Configurations:The plugin is designed to understand the peculiarities of Angular applications, making sure you get the most suitable testing environment without any hassle.

Well-Organized Structure: Angular Test Barrel generates a well-organized structure for your test files, keeping your project clean and maintainable.

Instant Start: Once you've set up Jest using this plugin, you can start writing tests right away, increasing your productivity from the get-go.

🔧 Getting Started with Angular Test Barrel

Getting started with Angular Test Barrel is as easy as pie! Follow these simple steps:

Install the package globally:

npm install -g ng-test-barrel

Usage

Once you have installed the plugin, you can use it to generate spec files for your Angular entities. Follow the steps below:

Open a terminal.
Run the following command to execute the Angular Test Barrel:

ng-test-barrel

Follow the prompts and provide the inputs

The plugin will analyze your Angular component,services' imports and constructor definitions and generate corresponding spec files in the appropriate directories if they doesnot exist already

You can review the generated skeleton spec files to ensure they meet your testing requirements. Feel free to modify them as needed.

🚀That's it!🚀

Sit back and watch as Angular Test Barrel does its magic. In just a few moments, your Angular project will be equipped with spec files, ready for you to write and execute tests.

🤝NPM Link

Angular Test Barrel is published as an NPM package. Feel free to download and use it: https://www.npmjs.com/package/ng-test-barrel.

🎁 Spread the Word!

If Angular Test Barrel has made your testing life easier, don't forget to share it with your fellow developers. Give it a star on GitHub, tweet about it, or write a blog post – your support means the world to us!

Happy testing with Angular Test Barrel! 🧪 Let's make Angular testing a breeze! 💨

Angular Migration Of Old Projects (Projects with Version
Abhishek P N — Mon, 30 Jan 2023 10:51:02 +0000

Background

Angular is a TypeScript-based free and open-source web application framework led by Google. It was a complete rewrite of AngularJS and it is a component-based framework for building scalable web apps. It has a collection of well-integrated libraries and features such as client-server communication, routing, and more.

Since Angular is very much flexible in terms of scalability for enterprise grade applications, many enterprises adopted this framework to develop their web-application when this framework was released

Angular team provides updates to this framework frequently to add features, provide security fixes and resolve bugs. Angular team provides support of 18 months to all major releases including 12 months of LTS

Since the intervals between the updates is relatively small, it is necessary for the enterprises to cope-up with the updates to have the latest security patch available.

But unfortunately many enterprises failed to get updated with the latest release of the framework and they are doing the upgradation for many versions at once
Eg- NG 7-NG14

Problems

In subsequent updates of angular from NG2, many changes were introduced. But the major one being the IVY compilation that was introduced in NG9 and made mandatory in NG12.

NG12 wont support View Engine compilation as prior versions of Angular did.

This change is a major change since the enterprises which adopted Angular and failed to update to subsequent versions that were released frequently, got stuck with version <NG9.

When they were mandated to have latest version of the framework available, there were many braking changes since all the dependencies used in the application were also needed to be compiled using IVY (ie Dependencies also needed to be updated to NG>9

Strict type and template checking in new versions introduced many errors in the application when tried to upgrade

Conclusion

Try to follow the best code practices

Update the projects and dependencies with the latest Angular versions available as soon as released

Enable Ivy compilation in NG9 while updating and resolve the errors then and there

So be up-to-date with the Angular versions released to get the latest security updates and features released