Angular v12 - Unit Test - [ERROR] No specs found - unit-testing

After developing my Angular application I would like to run unit tests with Karma and Jasmine.
I haven't written any unit-tests yet, but trying to run the default ones, with the 'ng test' command, I notice that the .spec files are not recognized by Karma-Jasmine.
Inside the browser, Karma gives the following message: "Incomplete, no specs found", in the terminal "Executed 0 of 0 SUCCESS".
I tried to generate a new application with the Angular CLI and to run the unit test. And it works.
Within my application, the Karma configuration files have not been touched, they are the same as those of the test application, and I don't understand why the .spec files are not recognized.
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"dibfibo": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/dibfibo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "dibfibo:build:production"
},
"development": {
"browserTarget": "dibfibo:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "dibfibo:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "dibfibo"
}
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/dibfibo'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

Related

Running Unit Test with Intern 4

We migrate our intern 3 test to intern 4.
Unfortunately I get following error for my unit tests (functional tests works)
Error: scriptError
No stack or location
Error: Dojo loader error:scriptError
No stack or location
My test:
File located:
build/webapp/app/tests/unit/test.js
define([], function () {
const {registerSuite} = intern.getInterface("object");
let assert = intern.getPlugin("chai").assert;
registerSuite("Test", function () {
return {
beforeEach() {
console.log("test");
},
tests: {
defaults() {
console.log("test3");
console.log("test2");
},
toggle() {
console.log("test4");
console.log("test5");
console.log("test8");
console.log("test9");
}
}
};
});
});
My intern.json (see below)
{
"loader": {
"script": "dojo",
"options": {
"packages": [
{
"name": "app",
"location": "build/webapp/app"
},
{
"name": "dojo",
"location": "lib/dojo"
},
{
"name": "dojox",
"location": "lib/dojox"
},
{
"name": "dijit",
"location": "lib/dijit"
},
{
"name": "dstore",
"location": "lib/dstore"
}
]
}
},
"suites": [
"./build/webapp/app/tests/unit/test.js"
],
"functionalSuites": [
"./build/webapp/app/tests/functional/TestDocumentation.js"
],
"functionalTimeouts": {
"connectTimeout": 60000
},
"defaultTimeout": 180000,
"filterErrorStack": true,
"tunnel": "selenium",
"tunnelOptions": {
"version": "3.8.0",
"drivers": [
{
"name": "ie",
"arch": "Win64",
"version": "3.8.0"
}
]
},
"debug": true,
"environments": [
"node",
{
"browserName": "internet explorer",
"fixSessionCapabilities": "no-detect"
}
]
}
If I execute the unit test in the node envrioment it works fine but after launching to the ie my test failed with the Dojo loader error.
Dojo & intern are aviable in the node_moudles directory.
Best Regards
Kai
Add the lines below to the json file solved my problem
{
"name": "tests",
"location": "build/webapp/app/tests/"
}

TS default imports with Jest mock

I'm writing tests for react-native with Jest and Typescript, but i'm with a problem when i mock a module that uses export default and export.
my mock is this:
// test.setup.js
jest.mock('react-native-text-input-mask', () => ({
default: 'TextInputMask',
mask: () => {},
unmask: () => {},
}));
but the jest can not use the default e cause error in my code when test is running:
import React, { Component } from 'react'
import { } from 'react-native'
import TextInputMask, { mask } from 'react-native-text-input-mask'
console.log(TextInputMask) // {'default': 'TextInputMask', mask: [Function]}
console.log(mask) // [Function]
export default class Comp extends Component<> {
constructor(props) {
super(props)
}
render(): JSX.Element {
return (
<TextInputMask // error in this line
mask={'[0000]'}
/>
)
}
}
Error in test:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
How i can mock a module with default export and export ?
my jest config:
// package.json
"devDependencies": {
"#types/fbemitter": "2.0.32",
"#types/jest": "21.1.1",
"#types/prop-types": "15.5.2",
"#types/react": "16.0.9",
"#types/react-intl": "2.3.2",
"#types/react-native": "0.48.9",
"#types/react-navigation": "1.0.20",
"#types/react-redux": "5.0.9",
"#types/react-test-renderer": "15.5.4",
"#types/redux-immutable-state-invariant": "2.0.2",
"#types/redux-mock-store": "0.0.11",
"#types/redux-storage": "4.0.10",
"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-plugin-jest-hoist": "21.2.0",
"babel-plugin-module-resolver": "2.7.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-preset-react-native": "4.0.0",
"chai": "4.1.2",
"chai-as-promised": "7.1.1",
"colors": "1.1.2",
"commitizen": "2.9.6",
"cz-conventional-changelog": "2.0.0",
"enzyme": "3.0.0",
"fbemitter": "2.1.1",
"husky": "^0.14.3",
"jest": "21.2.1",
"jest-cli": "21.2.1",
"jest-serializer-enzyme": "1.0.0",
"mocha": "3.5.3",
"plop": "1.9.0",
"prettier": "1.7.3",
"react-addons-test-utils": "15.6.2",
"react-dom": "16.0.0",
"react-native-debugger-open": "0.3.12",
"react-test-renderer": "16.0.0",
"redux-devtools-extension": "2.13.2",
"redux-immutable-state-invariant": "2.1.0",
"redux-mock-store": "1.3.0",
"rimraf": "2.6.2",
"selenium-webdriver": "3.5.0",
"sinon": "4.0.0",
"standard-version": "4.2.0",
"ts-jest": "21.0.1",
"tslint": "5.7.0",
"tslint-config-prettier": "1.5.0",
"tslint-react": "3.2.0",
"typescript": "2.5.3",
"wd": "1.4.1"
},
"jest": {
"preset": "react-native",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{ts,tsx}",
"!src/**/*.test.{ts,tsx}",
"!src/**/*.d.ts",
"!build/**",
"!**/node_modules/**"
],
"coverageDirectory": "coverage",
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__scripts__/assetsTransformer.js",
"^#animations.+\\.(json)$": "<rootDir>/__scripts__/assetsTransformer.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"json",
"ts",
"tsx",
"ios.ts",
"android.ts"
],
"modulePathIgnorePatterns": [
"<rootDir>/build/"
],
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"setupFiles": [
"./__scripts__/test-setup.js"
],
"testPathIgnorePatterns": [
"<rootDir>/build/",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|tcomb-form-native|react-navigation|lottie-react-native|jail-monkey|redux-persist/es/storage)"
],
"globals": {
"ts-jest": {
"useBabelrc": true
}
}
},
my TS config:
// tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"jsx": "react-native",
"watch": true,
"allowJs": true,
"sourceMap": true,
"preserveConstEnums": true,
"removeComments": true,
"lib": [
"dom",
"es2017"
],
"diagnostics": false,
"noImplicitAny": false,
"noImplicitUseStrict": false,
"strictNullChecks": false,
"noImplicitThis": false,
"moduleResolution": "node",
"outDir": "./build",
"rootDir": "./src",
"sourceRoot": ".",
"baseUrl": "./src",
"typeRoots": [
"./src/types"
],
"paths": {
"#assets/*": [
"../assets/*"
],
"#animations/*": [
"../animations/*"
]
},
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true
},
"types": [
"react",
"react-native",
"jest"
],
"include": [
"src/**/*"
],
"exclude": [
"index.android.js",
"index.ios.js",
"build",
"app",
"node_modules"
],
"compileOnSave": true
}
I resolve this, creating a mock for the component, like this:
// __mocks__/react-native-text-input-mask.tsx
import React from 'react'
class TextInputMask extends React.Component {
render() {
return null
}
}
const mask = (mask: string, value: string, text: string => {} ) => {}
const unmask = (mask: string, masked: string, unmasked: string => {} ) => {}
const setMask = (node: any, mask: string) => {}
export { mask, unmask, setMask }
export default TextInputMask

Angular2 2.4.3 with Angular-CLI 1.0.0-beta.25.5, after upgrade unit tests with karma/jasmine stops working

Recently I updated Angular from 2.0.3 to 2.4.3 and Angular-CLI from 1.0.0-beta.21 to 1.0.0-beta.25.5
After upgrade my unit tests stop working. Below you can find test file, configuration files and test results. Do you have any idea what can be wrong with it? Thanks
test result
$ npm test -- --watch=false
> portal#0.0.0 test /Users/artur/Sites/portal
> ng test "--watch=false"
19 01 2017 08:22:52.703:WARN [karma]: Port 9879 in use
19 01 2017 08:22:52.705:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9880/
19 01 2017 08:22:52.705:INFO [launcher]: Launching browser Chrome with unlimited concurrency
19 01 2017 08:22:52.726:INFO [launcher]: Starting browser Chrome
19 01 2017 08:22:55.619:INFO [Chrome 55.0.2883 (Mac OS X 10.12.2)]: Connected on socket XIi2HWa92rY4uvNvAAAA with id 35735618
Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
npm ERR! Test failed. See above for more details.
banner.component.spec.ts
/* tslint:disable:no-unused-variable */
import { Component } from '#angular/core';
import { TestBed, async } from '#angular/core/testing';
import { BannerComponent } from './banner.component';
import { RouterTestingModule } from '#angular/router/testing';
#Component({
template: ''
})
class DummyComponent {}
describe('Component: Banner', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
DummyComponent,
BannerComponent
],
imports: [
RouterTestingModule.withRoutes([
{ path: '', component: DummyComponent }
])
],
providers: []
});
});
it('should create an instance', async(() => {
let fixture = TestBed.createComponent(BannerComponent);
let component = fixture.debugElement.componentInstance;
expect(component).toBeTruthy();
}));
});
banner.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss'],
styles: [".banner >>> lp-svg svg path { fill: #fcfcfc; }"]
})
export class BannerComponent {}
package.json
{
"name": "portal",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ngc": "./node_modules/.bin/ngc -p ./src",
"start": "./node_modules/.bin/ng serve --host 0.0.0.0 --port 4000",
"build.dev": "./node_modules/.bin/ng build --bh /portal/",
"build.dev.watch": "./node_modules/.bin/ng build --bh /portal/ --watch true",
"build.prod": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
"build.prod.watch": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
"serve.prod": "node lp-server.js",
"lint": "tslint \"src/**/*.ts\"",
"test": "./node_modules/.bin/ng test",
"e2e": "./protractor.sh",
"copy.support-page": "./node_modules/.bin/copyfiles -u 1 ./src/support.html ./dist"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.3",
"#angular/compiler": "^2.4.3",
"#angular/compiler-cli": "^2.4.3",
"#angular/core": "^2.4.3",
"#angular/forms": "^2.4.3",
"#angular/http": "^2.4.3",
"#angular/platform-browser": "^2.4.3",
"#angular/platform-browser-dynamic": "^2.4.3",
"#angular/platform-server": "^2.4.3",
"#angular/router": "^3.4.3",
"copyfiles": "1.0.0",
"core-js": "2.4.1",
"jquery": "2.2.3",
"perfect-scrollbar": "~0.6.10",
"rxjs": "^5.0.3",
"ts-helpers": "1.1.1",
"typescript": "2.0.2",
"underscore": "1.8.3",
"zone.js": "0.6.23"
},
"devDependencies": {
"#types/jasmine": "^2.5.41",
"angular-cli": "^1.0.0-beta.25.5",
"codelyzer": "^2.0.0-beta.4",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^3.2.0",
"karma": "^1.4.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.2",
"karma-remap-istanbul": "^0.4.0",
"live-server": "1.1.0",
"protractor": "^5.0.0",
"ts-node": "1.2.1",
"tslint": "3.13.0"
}
}
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma'),
require('karma-mocha-reporter')
],
files: [
{ pattern: 'src/test.ts', watched: false },
{ pattern: 'src/assets/img/*', watched: false, included: false, served: true, nocache: false }
],
proxies: {
'/portal/assets/img/': '/base/src/assets/img/'
},
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9879,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
browserConsoleLogOptions: {
level: 'debug',
format: '%b %T: %m',
terminal: true
},
customLaunchers: {
'PhantomJS_custom': {
base: 'PhantomJS',
options: {
windowName: 'my-window',
settings: {
webSecurityEnabled: false
},
},
flags: ['--load-images=true'],
debug: true
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
exitOnResourceError: true
}
});
};
angular-cli.json
{
"project": {
"version": "1.0.0-beta.25.5",
"name": "ui-lender-portal-v2"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "lp",
"mobile": false,
"styles": [
"styles.scss",
"../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css"
],
"scripts": [
"../node_modules/underscore/underscore.js",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.js",
"./libs/jquery-ui/jquery-ui.min.js",
"./libs/jquery-mobile/jquery.mobile.custom.min.js",
"./libs/slick/slick.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
Finally I created new project with Angular-CLI and copied source files from my project. This helps.

3rd Party library testing angular 2 webpack

I am working on a project using angular 2 and a 3rd party library for making charts (AmCharts). I figured out how to use it along angular 2, but I'm getting a error when I try to make a unit test for the chart component:
Error: Error in ./ChartsComponent class ChartsComponent - inline template:1:2 caused by: AmCharts is not defined
ReferenceError: AmCharts is not defined
This project has been created using angular-cli and we've recently upgraded angular to version 2.2.1.
Here is angular-cli.json and karma.conf.js:
angular-cli.json
{
"project": {
"version": "1.0.0-beta.21",
"name": "cli-crud-webpack"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "gov",
"mobile": false,
"styles": [
"styles.scss",
"../public/assets/css/agate.css",
"../public/assets/css/bootstrap.min.css"
],
"scripts": [
"../public/assets/js/highlight.pack.js",
"../node_modules/amcharts3/amcharts/amcharts.js",
"../node_modules/amcharts3/amcharts/xy.js",
"../node_modules/amcharts3/amcharts/gauge.js",
"../node_modules/amcharts3/amcharts/serial.js",
"../node_modules/amcharts3/amcharts/pie.js",
"../node_modules/amcharts3/amcharts/themes/light.js",
"../node_modules/amcharts3/amcharts/themes/dark.js",
"../node_modules/amcharts3/amcharts/themes/black.js",
"../node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
I just found out I have to declare amcharts in karma configuration file, like this:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false },
"./public/assets/js/highlight.pack.js",
"./node_modules/amcharts3/amcharts/amcharts.js",
"./node_modules/amcharts3/amcharts/xy.js",
"./node_modules/amcharts3/amcharts/gauge.js",
"./node_modules/amcharts3/amcharts/serial.js",
"./node_modules/amcharts3/amcharts/pie.js",
"./node_modules/amcharts3/amcharts/themes/light.js",
"./node_modules/amcharts3/amcharts/themes/dark.js",
"./node_modules/amcharts3/amcharts/themes/black.js",
"./node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

using chutzpah and jasmine with typescript and systemjs

I am having trouble getting an import working in a jasmine unit test that is written in typescript. Chutzpah is throwing an error on the import statement - which in js gets translated to a define
import {fakeclass} from '../src/data-analysis/fakeclass';
The error I see is:
Error: ReferenceError: Can't find variable: define
Otherwise the test gets discovered and runs fine.
I assume it has to with systemjs not being loaded by chutzpah - is there a recommended way to set this up?
here is my chutzpah.json file
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "Normal",
"TypeScriptModuleKind": "CommonJS",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"References": [
{
"Includes": [ "src/*.ts" ],
"Excludes": [ "src/*.d.ts" ]
},
{
"Path": "./jspm_packages/system.src.js",
"IsTestFrameworkFile": true
},
{
"Path": "./jspm_packages/system-polyfills.src.js",
"IsTestFrameworkFile": true
},
{
"Path": "./config.js",
"IsTestFrameworkFile": true
}
],
"Tests": [
{
"Includes": [ "*/test/*.ts" ],
"Excludes": [ "*/test/*.d.ts" ]
}
]}
I took a look at the sample you gave me and got it working by following the pattern in the Chutzpah Angular2 sample.
config.js
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"es7.decorators",
"runtime"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
}
});
chutzpah.json
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"References": [
{
"Path": "./jspm_packages/system.src.js",
"IsTestFrameworkFile": true
},
{
"Path": "./jspm_packages/system-polyfills.src.js",
"IsTestFrameworkFile": true
},
{
"Path": "./config.js",
"IsTestFrameworkFile": true
}
],
"Tests": [
{
"Includes": [ "*/test/*.ts" ],
"Excludes": [ "*/test/*.d.ts" ]
}
],
"Server": {
"Enabled": true
}
}