Angular 7 & Jest & Babel Integration over Jasmine/Karma - AngularSnapshotSerializer.js in the snapshotSerializers option was not found

Steps to integrate of Jest & Babel with Angular 7+:

1. Run the following commands to install:

    # Remove Jesmin/Karma
    npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
    
    npm uninstall jasmine @types/jasmine
    
    rm ./karma.conf.js ./src/test.ts

    # Install jest    
    npm install --save jest@24.9 @angular-builders/jest@7 @types/jest@24 jest-preset-angular@8 

    # Install babel
    npm install --save-dev babel-jest babel-polyfill
    npm install --save @babel/core @babel/preset-env @babel/preset-flow @babel/preset-typescript    
 

2. On `package.json`, added the following code:

    "scripts": {
      ...
      ...
      "test": "ng test",
      "test:watch": "jest --watch",
      ...
      ...
    }
    ...
    ...   
    "jest": {
      "preset": "jest-preset-angular",
      "setupFilesAfterEnv": [
        "/setupJest.ts"
      ]
    }
 

3. Also, updated the following on the `angular.json`:

    ...
    ... 
    "test": {
       "builder": "@angular-devkit/build-angular:karma",
    ...
    ...
 

Replace with:

    ...
    ... 
    "test": {
       "builder": "@angular-builders/jest:run",
    ...
    ...
 

4. Create the `/setupJest.ts` with below content:

    import 'jest-preset-angular';   
 

5. Create the `/babel.config.js` with below content:

    module.exports = function(api) {

        const presets = [
            '@babel/preset-typescript',
             [
                "@babel/preset-env", {
                    "targets": {
                        "node": "current"
                    }
                }
            ],
            '@babel/preset-flow'
        ];

        return {
            presets,
        };
    };
 

6. And, finally tried running the `ng-test` from a terminal, however, I was stuck with the following error (see picture below):

7. Eventually, managed to fix the issue by adding the file `/src/jest.config.js` with below content:

    module.exports = {
        "transform": {
            "^.+\\.(ts|js|html)$": "ts-jest",
            "^.+\\.[t|j]sx?$": "babel-jest"
        },
        moduleFileExtensions: ['ts', 'html', 'js', 'json'],
        moduleNameMapper: {
            '^src/(.*)$': '/src/$1',
            '^app/(.*)$': '/src/app/$1',
            '^assets/(.*)$': '/src/assets/$1',
            '^environments/(.*)$': '/src/environments/$1',
        },
        transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
        snapshotSerializers: [
            'jest-preset-angular/build/AngularSnapshotSerializer.js',
            'jest-preset-angular/build/HTMLCommentSerializer.js',
        ],
    };

Thereafter, ran `ng test` again and can see the test running thru. I hope it helps!

Construct the dynamic table with specified number of columns on each row as per the size of the data in Angular

The below code is to generate a table with multiple rows with the specified number of columns on each row as per the size of the data array.

Then, on the output, we would be able to generate a table with multiple rows with a specified number of columns.

Check if MySQL Query uses cache or not for most frequent query.

Run the following queries to check if most recent MySQL query uses cache or not.

-- Query 1
SHOW VARIABLES LIKE 'have_query_cache'; 

-- The Output Value should be Yes, if it uses cache.

-- Query 2
SHOW VARIABLES LIKE 'query_cache_size';
-- -- The Output Value should be integer value, if it uses cache.

Refer Link 1 and Link 2 for more detail.

Hope the help!