Angular 7 & Jest & Babel Интеграция через Jasmine / Karma - AngularSnapshotSerializer.js в параметре snapshotSerializers не найден - PullRequest
Новая
       45

Angular 7 & Jest & Babel Интеграция через Jasmine / Karma - AngularSnapshotSerializer.js в параметре snapshotSerializers не найден

2 голосов
/ 29 октября 2019

Шаги для интеграции Jest & Babel с Angular 7 +:

  1. Для установки выполните следующие команды: 

    # 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. Вкл. package.json, добавлен следующий код: 

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

  3. Кроме того, обновлено следующее на angular.json: 

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

    Заменить на: 

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

  4. Создайте <root>/setupJest.ts с содержимым ниже: 

    import 'jest-preset-angular';

  5. Создайте <root>/babel.config.js с содержанием ниже: 

    module.exports = function(api) {

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

    return {
        presets,
    };
};
  6. И, наконец, попытался запустить ng-test из терминала, однако я застрял со следующей ошибкой (см. Рисунок ниже): enter image description here

1 Ответ

0 голосов
/ 29 октября 2019
В конце концов, удалось решить проблему, добавив файл <root>/src/jest.config.js с содержанием ниже: 
module.exports = {
    "transform": {
        "^.+\\.(ts|js|html)$": "ts-jest",
        "^.+\\.[t|j]sx?$": "babel-jest"
    },
    moduleFileExtensions: ['ts', 'html', 'js', 'json'],
    moduleNameMapper: {
        '^src/(.*)$': '<rootDir>/src/$1',
        '^app/(.*)$': '<rootDir>/src/app/$1',
        '^assets/(.*)$': '<rootDir>/src/assets/$1',
        '^environments/(.*)$': '<rootDir>/src/environments/$1',
    },
    transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
    snapshotSerializers: [
        'jest-preset-angular/build/AngularSnapshotSerializer.js',
        'jest-preset-angular/build/HTMLCommentSerializer.js',
    ],
};

После этого снова запустил ng test и можно увидеть, как проходит тест.

Надеюсь, это поможет!

...