Karma,Jasmine,JSPM, Babel base.preset error - karma-jasmine

I am trying to use Karma, Jasmine, JSPM, and Babel all together. It seems I am getting an error I am not sure how to trace:
12 04 2016 19:59:04.407:ERROR [preprocessor.babel]: [BABEL] /Users/allen/work/twentytwenty.qualboard/src/TwentyTwenty.QualBoard.Web/wwwroot/config.js: Unknown option: base.preset. Check out http://babeljs.io/docs/usage/options/ for more info
It barks about config.js and the option base.preset. I am not sure why thought I have done a complete project search for base.preset and cannot find its existence.
Karma Config:
module.exports = function(config) {
config.set({
autoWatch: false,
babelPreprocessor: {
options: {
preset: ['es2015'],
sourceMap: 'inline',
},
},
basePath: '',
browsers: [
'PhantomJS',
],
colors: true,
concurrency: Infinity,
coverageReporter: {
type: 'html',
dir: 'converage/',
},
exclude: [],
files: [],
frameworks: [
'jspm',
'jasmine',
],
jspm: {
config: './wwwroot/config.js',
packages: './wwwroot/jspm_packages',
loadFiles: [
'test/**/*.js',
],
serveFiles: [
'test/**/*.js',
],
},
logLevel: config.LOG_INFO,
plugins: [
'karma-babel-preprocessor',
'karma-coverage',
'karma-jasmine',
'karma-jspm',
'karma-phantomjs-launcher',
'karma-spec-reporter',
],
port: 9876,
preprocessors: {
'./wwwroot/config.js': ['babel'],
'./wwwroot/aurelia/**/*.js': ['babel'],
'./wwwroot/test/**/*.js': ['babel', 'coverage'],
},
proxies: {
'/wwwroot/': '/TwentyTwenty.Qualboard.Web/wwwroot/',
'/jspm_packages/': '/wwwroot/jspm_packages',
},
reporters: [
'coverage',
'spec',
],
singleRun: true,
specReporter: {
maxLogLines: 1,
suppressErrorSummary: true,
suppressFailed: false,
suppressPassed: false,
supressSkipped: false,
},
});
};
My BabelRc:
{
"presets": ["es2015"]
}
I am starting Karma in the terminal by doing:
karma start
What am I missing?

You have a typo, it is presets and not preset:
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline',
},
}

Related

test environment does not support `mocked`

I'm writing some tests for a React Native app written in TS and currently trying to migrate to jest.mocked instead of using the mocked export from ts-jest/utils (which is required in order to move past jest v27). I get the following error though and have tried all sorts of things to try and fix it, but with no luck.
Your test environment does not support `mocked`, please update it.
54 |
55 | beforeEach(() => {
> 56 | jest.mocked(Icon).mockReturnValue(null)
| ^
57 | })
58 |
59 | afterEach(() => {
at Object.mocked (node_modules/jest-runtime/build/index.js:2204:19)
// babel.config.js
module.exports = {
plugins: [
[
'module-resolver',
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
root: ['.'],
},
],
'transform-inline-environment-variables',
['#babel/plugin-proposal-decorators', { legacy: true }],
'react-native-reanimated/plugin',
],
presets: [
'module:metro-react-native-babel-preset',
['#babel/preset-react', { runtime: 'automatic' }],
],
}
// jest.config.js
module.exports = {
preset: 'react-native',
collectCoverage: false,
coveragePathIgnorePatterns: ['/node_modules/', '.*.test..*'],
coverageReporters: ['text'],
coverageThreshold: {
global: {
branches: 100,
},
},
forceExit: true,
globals: {
'ts-jest': {
babelConfig: '<rootDir>/babel.config.js',
diagnostics: false,
isolatedModules: true,
},
},
moduleFileExtensions: [
'gql',
'ts',
'tsx',
'js',
'jsx',
'json',
'node',
'csv',
],
modulePaths: ['<rootDir>'],
modulePathIgnorePatterns: modulesToIgnore,
resetMocks: false,
resetModules: false,
setupFilesAfterEnv: ['<rootDir>/__tests__/setup/index.ts'],
testMatch: [
'<rootDir>/__tests__/**/*.test.ts?(x)',
'<rootDir>/src/**/?(*.)test.ts?(x)',
],
testPathIgnorePatterns: ['<rootDir>/node_modules', ...modulesToIgnore],
transform: {
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': 'ts-jest',
},
transformIgnorePatterns: [
`<rootDir>/node_modules/(?!${modulesNeedingTransform.join('|')})`,
],
verbose: true,
}
Nothing is standing out to me as immediately obvious for what's keeping jest.mocked from being available.

NUXT does not optimize static site

I have a project in NUXT js and I want to generate a static website.
It does work, but does not optimize it: does not extract the css in a single file with build.extractCSS for example.
Is it something related to the static mode?
I also try some other optimization but they don't seems to work either.
Here my config:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
target: process.env.NODE_TARGET === 'static' ? 'static' : 'server',
router: {
base: '/myRoute/',
routeNameSplitter: '/'
},
server: {
host: "localhost" // default: localhost
},
head: {
titleTemplate: 'myProject',
title: 'myProject',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{
hid: 'icon',
rel: 'icon',
type: 'image/png',
href: '/favicon.png'
}
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/css/custom.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
['#nuxtjs/vuetify', { treeShake: true }],
"#nuxtjs/svg",
'vue-social-sharing/nuxt'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
],
pageTransition: {
name: 'slide-fade',
mode: 'out-in'
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
env: {
NUXT_ENV_API_HOST: process.env.NUXT_ENV_API_HOST,
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
meta: {
/* meta options */
theme_color: "#27363B"
},
manifest: {
lang: 'en'
}
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
optionsPath: './vuetify.options.js',
customVariables: ['~/assets/variables.scss'],
treeShake: true,
// defaultAssets: false,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
// optimizeCSS: true,
// extractCSS: true,
build: {
analyze: {
analyzerMode: 'static'
},
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
minifyURLs: true,
removeComments: true,
removeEmptyElements: true
}
},
optimizeCSS: true,
extractCSS: true,
terser: {
parallel: true,
cache: false,
sourceMap: false,
extractComments: {
filename: 'LICENSES'
},
terserOptions: {
mangle: true,
output: {
comments: /^\**!|#preserve|#license|#cc_on/
}
}
},
babel: {
plugins: [
["#babel/plugin-proposal-private-property-in-object", { "loose": true }]
]
},
extend(config, { isDev, isClient }) {
config.module.rules.push({
test: /\.(obj|mtl|fbx|gltf|glb|hdr|bin)$/,
loader: 'file-loader'
})
},
transpile: [
"three"
]
},
}

Can't create code coverage for VUE files with karma, webpack and typescript

I am trying to create code coverage for VUE files using typescript in karma and webpack.
I am using istanbul-instrumenter-loader as a post process after but keep getting.
Everything works okay for pure .ts files, but when incluiding vue files I get
build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
TypeError: Cannot read property 'fileCoverage' of undefined
When debugging istanbul-instrumenter-loader I noticed that
ee.exit(path); is undefined because the VUE files are being instrumented 3 times, the first two work okay but the third one is the one that crashes.
this is my webpack config
module.exports = {
node: {
fs: 'empty'
},
mode: 'development',
devtool: 'inline-source-map',
stats: 'verbose',
resolve: {
alias: {
Home: path.resolve( __dirname ),
Client: path.resolve( __dirname, 'client/' ),
ClientUtils$: path.resolve( __dirname, 'client/utils/index.utils.client.ts' ),
Views: path.resolve( __dirname, 'client/views/' ),
Components: path.resolve( __dirname, 'client/components/' ),
Constants$: path.resolve( buildPath, 'shared/constants.js' )
},
extensions: [
'.scss',
'.js',
'.ts',
'.vue'
]
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.ts?$/,
exclude: /node_modules/,
use: [
{
loader: 'cache-loader'
},
{
loader: 'thread-loader',
options: {
workers: Math.max(require('os').cpus().length - 1, 1)
}
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: true,
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
{
test: /\.js$/,
exclude: [/dist/, /node_modules/, /coverage_server/, /coverage_client/],
loader: 'babel-loader'
},
{
test: /\.ts$/,
include: [/client/],
exclude: [
/node_modules/,
/\.spec\.ts$/,
/server/
],
enforce: 'post',
loader: 'istanbul-instrumenter-loader',
options: {
esModules: true
}
},
{
test: /\.(s*)css$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
};
and my karma.conf is
module.exports = function(config) {
let files = [];
if (config.grep) {
files.push({ pattern: config.grep, type: 'module' });
} else {
files.push('client/index.client.spec.ts');
}
config.set({
frameworks: ["mocha", "chai", "sinon"],
files,
preprocessors: {
'client/**/*spec.ts': ['webpack', 'sourcemap']
},
webpack: require('./webpack.test.js'),
reporters: ['spec', 'dots', 'html', 'coverage-istanbul'],
browsers: ['ChromeHeadless'],
coverageReporter: {
dir: './coverage_client',
includeAllSources: true,
reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text' }]
},
coverageIstanbulReporter: {
reports: ['text', 'lcov' ],
dir: './coverage_client',
fixWebpackSourcePaths: true,
'report-config': {
html: { outdir: 'html' }
}
},
htmlReporter: {
outputDir: 'karma_client_html', // where to put the reports
templatePath: null, // set if you moved jasmine_template.html
focusOnFailures: true, // reports show failures on start
namedFiles: false, // name files instead of creating sub-directories
pageTitle: null, // page title for reports; browser info by default
urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
reportName: 'report_summary_filename', // report summary filename; browser info by default
// experimental
preserveDescribeNesting: false, // folded suites stay folded
foldAll: false // reports start folded (only with preserveDescribeNesting)
}
});
};
and my tsconfig is
{
"compilerOptions": {
"incremental": true,
"outDir": "./build/",
"target": "es2018",
"module": "CommonJS",
"lib": ["es2018", "dom", "dom.iterable"],
"allowSyntheticDefaultImports": true,
"inlineSourceMap": true,
"sourceMap": false,
"noImplicitAny": false,
"strict": true,
"alwaysStrict": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"types": [ "node", "mocha", "chai" ],
"baseUrl": ".",
"paths": {
"type-graphql": ["./node_modules/type-graphql/dist/browser-shim.ts"],
"Client/*": ["./client/*"],
"ClientUtils": ["./client/utils/index.utils.client.js"],
"Views/*": ["./client/views/"],
"Components/*": ["./client/components/*"],
"Constants": ["./shared/constants.ts"]
}
},
"include": [
"./client/**/*.ts",
"./client/**/*.vue",
"./server/**/*.ts",
"./shared/**/*.ts"
],
"exclude": [
"**/*.spec.ts",
"node_modules"
],
"files": ["./vue-shims.d.ts"]
}

How to define the right Preset When using Nuxt in order to run on IE

I'm trying to run my VueJS + Nuxt app on IE and get the following error:
'Unable to get property 'call' of undefined or null reference'
This happens in the following line:
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
when moduleID = "./node_modules/webpack-hot-middleware/client.js?name=client&reload=true&timeout=30000&path=/__webpack_hmr"
I think it has something to do with the way I configure my presets when using Nuxt.
This is currently how nuxt.config.js build part looks like:
build: {
vendor: ['vuetify', 'babel-polyfill', 'vued3tree', 'vue2-editor','lodash'],
extractCSS: true,
babel: {
presets: [
['es2015'],
[
'vue-app',
{
useBuiltIns: true,
targets: { ie: 11, uglify: true },
},
],
],
},
How do I need to configure my presets in order for my app to run on IE?
solved that as well by removing a library called vue2-hammer. Now I have one issue in Chrome and in IE: 'regeneratorRuntime is not defined'. tried every solution in Google and no solution. Now my Nuxt.config.js looks like this:
const polyfill = require('#babel/polyfill');
module.exports = {
entry: [polyfill],
build: {
extractCSS: true,
extend(config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.module.rules.push(
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
plugins: [
[
'#babel/plugin-transform-runtime',
{
corejs: false,
helpers: true,
regenerator: true,
useESModules: false,
},
],
[
'#babel/plugin-transform-regenerator',
{
asyncGenerators: false,
generators: false,
async: false,
},
],
'babel-plugin-transform-es2015-shorthand-properties',
'#babel/plugin-transform-exponentiation-operator',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-arrow-functions',
],
},
},
);
}
},
},
babel: {
presets: [
[
'es2015',
'stage-0',
],
],
exclude: ['transform-regenerator'],
},
Ant idea what can cause this?

Karma Coverage (Jasmine, Babel, Webpack)

After making changes to my karma.conf.js to allow for Karma Coverage, running karma now fails. I'm not really sure what is going on. Any thoughts?
process.env.NODE_ENV = 'test';
module.exports = function(config) {
config.set({
autoWatch: true,
browsers: ['Chrome'], //, 'Firefox', 'Safari'],
frameworks: ['jasmine'],
logLevel: config.LOG_INFO,
singleRun: false,
port: 9876,
colors: true,
concurrency: Infinity, // how many browser should be started simultaneous
files: [
'test/**/*Spec.js',
'src/**/*.js' //ADDED FOR COVERAGE
],
preprocessors: {
'test/**/*Spec.js' : ['babel', 'webpack', 'sourcemap'],
'src/**/*.js' : ['babel', 'webpack', 'sourcemap', 'coverage'] //ADDED FOR COVERAGE
},
reporters: ['progress', 'coverage'], //ADDED FOR COVERAGE
coverageReporter: { //ADDED FOR COVERAGE
type : 'html',
dir : 'coverage/'
},
webpack: {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: [
'node_modules'
]
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
},
webpackServer: {
noInfo: true //don't spam the console when running in karma!
},
plugins: [
"karma-babel-preprocessor",
"karma-chrome-launcher",
"karma-webpack",
"karma-sourcemap-loader",
"karma-jasmine",
'karma-coverage' //ADDED FOR COVERAGE
],
babelPreprocessor: {
options: {
presets: [
"latest",
"react-app"
],
sourceMap: 'inline',
plugins: [
"transform-object-rest-spread"
]
}
}
})
}
I'm getting the following error (and many more similar below this)
27 12 2016 06:35:35.997:ERROR [karma]: { Error: no such file or directory
at MemoryFileSystem.readFileSync (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/memory-fs/lib/MemoryFileSystem.js:114:10)
at MemoryFileSystem.readFile (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
at doRead (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/karma-webpack/lib/karma-webpack.js:201:29)
at Plugin.readFile (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/karma-webpack/lib/karma-webpack.js:205:5)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
code: 'ENOENT',
errno: 34,
message: 'no such file or directory',
path: '/_karma_webpack_/src/components/Error.js' }