Develop Reference

Optional links when using jest to run tests

I'm trying to run tests on jest. My current project is the technology stack of vue2. x. When I run it, I found that the latest ES6 template supports optional chained syntax, but I don't know how to make jest compatible with it. Is there a solution?
Look like：
xxx.vue
<div
class="popover-arrow"
:style="{ borderBottomColor: $__GAME__?.tips?.bgColor || '' }"></div>
What needs to be supported is ES6 Optional chaining
Here is my configuration:
module.exports = {
coverageDirectory: '.coverage',
testMatch: ['**/__tests__/specs/DetailsUidComponent.spec.js'],
testEnvironment: 'jsdom',
collectCoverageFrom: [
'**/components/DetailsUidComponent/**/**/*.vue',
'**/components/FooterButton/*.vue',
'**/components/PublicShare/*.vue',
'**/components/PublicSkuTemplate/*.vue',
'**/components/MoneyDisplay/*.vue',
'**/Detail/components/Coupon/*.vue',
'**/Detail/components/BottomTips/*.vue',
'**/Detail/components/LordsmobileTipsBottom/*.vue',
'**/Detail/components/SubmitBtn/*.vue',
],
moduleFileExtensions: ['vue', 'js'],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
},
coveragePathIgnorePatterns: ['/node_modules/', 'package.json', 'yarn.lock'],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'#page_detail/(.*)$': '<rootDir>/src/pages/Detail/$1',
},
// verbose: true,
coverageThreshold: {
global: {
branches: 100,
// functions: 80,
// lines: 80,
// statements: 80,
},
// '**/DetailsUidComponent/components/UidComp/*.vue': {
// lines: 100,
// },
},
}
I tried to find the relevant configuration in jest's github, but it was typescript-related, but this is not what I want, I need javascript

Why eslint consider JSX or some react #types undefined, since upgrade typescript-eslint/parser to version 4.0.0

The context is pretty big project built with ReactJs, based on eslint rules, with this eslint configuration
const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1
module.exports = {
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:react/recommended',
'prettier',
'prettier/#typescript-eslint'
],
plugins: [
'react',
'html',
'json',
'prettier',
'import',
'jsx-a11y',
'jest',
'#typescript-eslint',
'cypress'
],
settings: {
'html/indent': '0',
es6: true,
react: {
version: '16.5'
},
propWrapperFunctions: ['forbidExtraProps'],
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
},
alias: {
extensions: ['.js', '.jsx', '.json']
}
}
},
env: {
browser: true,
node: true,
es6: true,
jest: true,
'cypress/globals': true
},
globals: {
React: true,
google: true,
mount: true,
mountWithRouter: true,
shallow: true,
shallowWithRouter: true,
context: true,
expect: true,
jsdom: true
},
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'es2020',
ecmaFeatures: {
globalReturn: true,
jsx: true
},
lib: ['ES2020']
},
rules: {
'arrow-parens': ['error', 'as-needed'],
'comma-dangle': ['error', 'never'],
eqeqeq: ['error', 'smart'],
'import/first': 0,
'import/named': 'error',
'import/no-deprecated': process.env.NODE_ENV === 'production' ? 0 : 1,
'import/no-unresolved': ['error', { commonjs: true }],
'jsx-a11y/alt-text': DONT_WARN_CI,
'jsx-a11y/anchor-has-content': DONT_WARN_CI,
'jsx-a11y/anchor-is-valid': DONT_WARN_CI,
'jsx-a11y/click-events-have-key-events': DONT_WARN_CI,
'jsx-a11y/heading-has-content': DONT_WARN_CI,
'jsx-a11y/iframe-has-title': DONT_WARN_CI,
'jsx-a11y/label-has-associated-control': [
'error',
{
controlComponents: ['select']
}
],
'jsx-a11y/label-has-for': [
'error',
{
required: {
some: ['nesting', 'id']
}
}
],
'jsx-a11y/media-has-caption': DONT_WARN_CI,
'jsx-a11y/mouse-events-have-key-events': DONT_WARN_CI,
'jsx-a11y/no-autofocus': DONT_WARN_CI,
'jsx-a11y/no-onchange': 0,
'jsx-a11y/no-noninteractive-element-interactions': DONT_WARN_CI,
'jsx-a11y/no-static-element-interactions': DONT_WARN_CI,
'jsx-a11y/no-noninteractive-tabindex': DONT_WARN_CI,
'jsx-a11y/tabindex-no-positive': DONT_WARN_CI,
'no-console': 'warn',
'no-debugger': 'warn',
'no-mixed-operators': 0,
'no-redeclare': 'off',
'no-restricted-globals': [
'error',
'addEventListener',
'blur',
'close',
'closed',
'confirm',
'defaultStatus',
'defaultstatus',
'event',
'external',
'find',
'focus',
'frameElement',
'frames',
'history',
'innerHeight',
'innerWidth',
'length',
'localStorage',
'location',
'locationbar',
'menubar',
'moveBy',
'moveTo',
'name',
'onblur',
'onerror',
'onfocus',
'onload',
'onresize',
'onunload',
'open',
'opener',
'opera',
'outerHeight',
'outerWidth',
'pageXOffset',
'pageYOffset',
'parent',
'print',
'removeEventListener',
'resizeBy',
'resizeTo',
'screen',
'screenLeft',
'screenTop',
'screenX',
'screenY',
'scroll',
'scrollbars',
'scrollBy',
'scrollTo',
'scrollX',
'scrollY',
'self',
'status',
'statusbar',
'stop',
'toolbar',
'top'
],
'no-restricted-modules': ['error', 'chai'],
'no-unused-vars': [
'error',
{
varsIgnorePattern: '^_',
argsIgnorePattern: '^_'
}
],
'no-var': 'error',
'one-var': ['error', { initialized: 'never' }],
'prefer-const': [
'error',
{
destructuring: 'any'
}
],
'prettier/prettier': 'error',
'react/jsx-curly-brace-presence': [
'error',
{ children: 'ignore', props: 'never' }
],
'react/jsx-no-bind': [
'error',
{
allowArrowFunctions: true
}
],
'react/jsx-no-literals': 1,
'react/jsx-no-target-blank': DONT_WARN_CI,
'react/jsx-no-undef': ['error', { allowGlobals: true }],
'react/no-deprecated': DONT_WARN_CI,
'react/prop-types': 0,
'require-await': 'error',
'space-before-function-paren': 0
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
'no-unused-vars': 'off',
'import/no-unresolved': 'off'
}
}
]
}
Since the upgrade of the library "#typescript-eslint/parser": "^4.0.0" from "#typescript-eslint/parser": "^3.10.1" this following command ...
eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss'
... brings these following errors
9:45 error 'ScrollBehavior' is not defined no-undef
224:12 error 'KeyboardEventInit' is not defined no-undef
53:5 error 'JSX' is not defined no-undef
I know I could fix them adding to the prop globals also the keys JSX: true or KeyboardEventInit: true but it is not the way I want to go.
Any ideas of what is going on here? Where is the configuration error?
Thanks a lot

I had the same issue when trying to declare variables as of type JSX.Element in typescript. I added "JSX":"readonly" to globals in .eslintrc.json and the problem was gone. In your case it would be:
globals: {
React: true,
google: true,
mount: true,
mountWithRouter: true,
shallow: true,
shallowWithRouter: true,
context: true,
expect: true,
jsdom: true,
JSX: true,
},
From the following link, I got that you actually use several options after JSX. You could use true,false, writable or readonly (but not off).
https://eslint.org/docs/user-guide/configuring

Official answer is here and it says indeed to add them to globals or to disable the no-undef rule because TypeScript already has already its own checks:
I get errors from the no-undef rule about global variables not being defined, even though there are no TypeScript errors
The no-undef lint rule does not use TypeScript to determine the
global variables that exist - instead, it relies upon ESLint's
configuration.
We strongly recommend that you do not use the no-undef lint rule on
TypeScript projects. The checks it provides are already provided by
TypeScript without the need for configuration - TypeScript just does
this significantly better.
As of our v4.0.0 release, this also applies to types. If you use
global types from a 3rd party package (i.e. anything from an #types
package), then you will have to configure ESLint appropriately to
define these global types. For example; the JSX namespace from
#types/react is a global 3rd party type that you must define in your
ESLint config.
Note, that for a mixed project including JavaScript and TypeScript,
the no-undef rule (like any role) can be turned off for TypeScript
files alone by adding an overrides section to .eslintrc.json:
"overrides": [
{
"files": ["*.ts"],
"rules": {
"no-undef": "off"
}
}
]
If you choose to leave on the ESLint no-undef lint rule, you can
manually define the set of allowed globals in your ESLint
config,
and/or you can use one of the pre-defined environment (env)
configurations.

From the typescript-eslint troubleshooting guide:
We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.
In your .eslintrc.js, turn the rule off for TypeScript files using overrides:
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
rules: {
'no-shadow': 'off',
'#typescript-eslint/no-shadow': ['error'],
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
],
};

Not able to add favicon in gatsby config file

Even after adding favicon to gatsby hello world starter project in gatsby config file, its not working.
I tried googling and searched in stackoverflow for similar question, How do i add favicon gatsby-config.js?. But that doesn't help or i maybe wrong somewhere.
Please correct me!!
GATSBY CONFIG.JS
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/
module.exports = {
/* Your site config here */
siteMetadata: {
title: "xxxxxxx",
author: "Subin",
},
plugins: [
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-source-contentful",
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
},
},
"gatsby-plugin-sass",
// this plugin will pull all the files in our project system
{
resolve: "gatsby-source-filesystem",
options: {
name: "src",
path: `${__dirname}/src/`,
icon: `../src/images/favicon-32x32.png`,
},
},
"gatsby-plugin-sharp",
// REMARK plugin needed to extract the markdown files and parses
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
"gatsby-remark-relative-images",
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 750,
linkImagesOriginal: false,
},
},
],
},
},
],
}
PROJECT DIRECTORY IMAGE
Image : Tree hierarchy of my project structure

To display your favicon, you need to have the gatsby-plugin-manifest installed, it doesn't come with the hello world starter.
npm install --save gatsby-plugin-manifest
And here is your gatsby-config.js with some default settings to this plugin:
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/
module.exports = {
/* Your site config here */
siteMetadata: {
title: "xxxxxxx",
author: "Subin"
},
plugins: [
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-source-contentful",
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
}
},
"gatsby-plugin-sass",
// this plugin will pull all the files in our project system
{
resolve: "gatsby-source-filesystem",
options: {
name: "src",
path: `${__dirname}/src/`,
icon: `../src/images/favicon-32x32.png`
}
},
"gatsby-plugin-sharp",
// REMARK plugin needed to extract the markdown files and parses
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
"gatsby-remark-relative-images",
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 750,
linkImagesOriginal: false
}
}
]
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "xxx",
short_name: "xxxx",
start_url: "/",
background_color: "#6b37bf",
theme_color: "#6b37bf",
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: "standalone",
icon: "src/images/favicon-32x32.png" // This path is relative to the root of the site.
}
}
]
};
Remember to stop your development server and start a brand new one when modifying gatsby-config.js in order to see your changes.
Can you try this and let me know if it works as intended?

Issue with Karma-Browserify + Karma-Coverage

I am having issues getting karma-browserify to work with karma-coverage. I have spent a lot of time trying to figure out what is wrong, but I didn't find a solution.
Here is my .js file (the functions don't do anything; they are just mocks to test code coverage):
// src/js/utilities/form-validation.js
let includedInTest = () => true;
let alsoIncludedInTest = () => true;
let notIncludedInTest = () => true;
let alsoNotIncludedInTest = () => true;
export default {
includedInTest,
alsoIncludedInTest
};
This is my test file:
// src/spec/utilities/form-validation.spec.js
import formUtilities from '../../js/utilities/form-validation';
describe('Form validation functions', function () {
it('Should return "true"', function () {
expect(formUtilities.includedInTest()).toBe(true);
});
it('Should return "true"', function () {
expect(formUtilities.alsoIncludedInTest()).toBe(true);
});
});
Finally, this is my karma.conf:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'src/js/**/*.js',
'src/spec/**/*.spec.js'
],
exclude: [
'src/js/index.js'
],
preprocessors: {
'src/js/**/*.js': ['browserify', 'coverage'],
'src/spec/**/*.spec.js': ['browserify']
},
browserify: {
debug: true,
transform: [
['babelify', { presets: ['es2015'] }]
]
},
reporters: ['mocha', 'coverage'],
mochaReporter: {
colors: {
success: 'green',
info: 'bgBlue',
warning: 'cyan',
error: 'bgRed'
},
symbols: {
success: '√',
info: '#',
warning: '!',
error: 'x'
}
},
coverageReporter: {
instrumenters: { isparta: require('isparta') },
instrumenter: {
'src/**/*.js': 'isparta'
},
dir: 'coverage',
subdir: '.',
reporters: [
{ type: 'html', dir: 'coverage' },
{ type: 'text-summary' }
],
check: {
global: {
statements: 90,
branches: 90,
functions: 90,
lines: 90
},
each: {
statements: 90,
branches: 90,
functions: 90,
lines: 90
}
},
watermarks: {
statements: [50, 75],
functions: [50, 75],
branches: [50, 75],
lines: [50, 75]
}
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
});
};
This config yields this result:
==== Coverage summary ====
Statements : 100% ( 1/1 )
Branches : 100% ( 2/2 )
Functions : 100% ( 0/0 )
Lines : 100% ( 1/1 )
=============
This is obviously wrong since I have four functions on "form-validation.js", and I am testing two of them. But according to the summary report, there are no functions to be tested.
This line from coverage/index.html reveals only one line is being parsed by karma-coverage:
I also tried 'browserify-istanbul' in the transform array (and removed instrumenters from "coverageReport"):
transform: [
['babelify', { presets: ['es2015'] }],
'browserify-istanbul'
]
But this generates an error:
18 08 2017 15:50:14.617:ERROR [karma]: TypeError: Cannot read property 'start' of undefined
at /Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/object-utils.js:59:44
at Array.forEach (native)
at Object.addDerivedInfoForFile (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/object-utils.js:58:37)
at Collector.fileCoverageFor (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:94:15)
at /Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:108:30
at Array.forEach (native)
at Collector.getFinalCoverage (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:107:22)
at checkCoverage (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:148:33)
at /Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:257:32
at Array.forEach (native)
at Collection.forEach (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma/lib/browser_collection.js:93:21)
at /Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:247:16
at Array.forEach (native)
at CoverageReporter.onRunComplete (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:246:15)
at Server.<anonymous> (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma/lib/events.js:13:22)
at emitTwo (events.js:111:20)
Any suggestions on how to fix the config file?

The config suggested on the correct answer of this post helped me: Karma/Istanbul Code Coverage does not find functions and always returns 100%
Now I am getting an error on the html report ERROR [coverage]: TypeError: Cannot read property 'text' of undefined (meaning the html file I want to generate for the report is not being generated), which seems to be related to istanbul. However, I am getting the right code coverage report on my terminal window:
Strangely enough, the error doesn't happen every time the tests run, so I am able to get the html file just fine sometimes.
Here is the karma.conf that solved the problem addressed on my question:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'src/js/**/*.js',
'src/spec/**/*.spec.js'
],
exclude: [
'src/js/index.js'
],
preprocessors: {
'src/js/**/*.js': ['browserify'],
'src/spec/**/*.spec.js': ['browserify']
},
browserify: {
debug: true,
extensions: ['.js'],
configure: (bundle) => {
bundle.transform('babelify', { presets: ['es2015'] });
bundle.transform(require('browserify-istanbul')({
ignore: ['**/spec/**']
}));
}
},
reporters: ['mocha', 'coverage'],
coverageReporter: {
dir: 'coverage',
subdir: '.',
reporters: [
{ type: 'html', dir: 'coverage' },
{ type: 'text-summary' }
],
etc...
}
});
};

Strategy for filtering variables and building a minified JS distribution artifact for Node.js

I come from a Java/Maven background where you would create WAR files to deploy. Maven provides the ability to "filter" files during the build and replace variables at build time with targeted information for the environment you're deploying to.
Now I am working in Node.js and I was wondering if there's a similar facility and best practice you can use in Node.js whereby I could minify my javascript into a single file but at the same time filter variables respective to the environment I'm deploying to.
For instance, there's an app_name config that I'd like to be environment specific:
exports.config = {
app_name : ['$APPNAME-$ENV'],
license_key : 'xxx',
logging : {
level : '$DEBUG_LEVEL'
}
};
So I'd like to be able to update all the $ variables above with environment specific variables into a separate minified JS file. It seems like I'd have to copy the files into a staging area, do a string replace on the variables and then minify. Does that seem reasonable or are there any recommendations on how to best accomplish this in the Node world?

Here's what I ended up doing with GruntJS to accomplish what was talked about above (clean, copy, string-replace, JSHint, and Google CC to minify). I posted a more complete reading of this here for those interested in a deeper dive.
(function () {
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ["dist"],
copy: {
build: {
files: [
{src: ['./**/*.js', './*.json', './stackato.yml', './README.md', './nunit.js', './test/**/*', '!./dist/**/*', '!./node_modules/**/*', '!./Gruntfile.js'], dest: 'dist/'}
]
}
},
'string-replace': {
dev: {
files: {
"dist/": ["newrelic.js", "stackato.yml", "package.json"]
},
options: {
replacements: [
{
pattern: '$APPNAME',
replacement: "services-people"
},
{
pattern: '$VERSION',
replacement: "1.0.6"
},
{
pattern: 'server.js',
replacement: "server.min.js"
},
{
pattern: '$ENV',
replacement: "DEV"
},
{
pattern: '$PDS_PWD',
replacement: ""
},
{
pattern: '$INSTANCES',
replacement: "1"
},
{
pattern: '$NEWRELIC_TRACE_LVL',
replacement: "trace"
}
]
}
},
prod: {
files: {
"dist/": ["newrelic.js", "stackato.yml", "package.json"]
},
options: {
replacements: [
{
pattern: '$APPNAME',
replacement: "services-people"
},
{
pattern: '$VERSION',
replacement: "1.0.6"
},
{
pattern: 'server.js',
replacement: "server.min.js"
},
{
pattern: '$ENV',
replacement: "prod"
},
{
pattern: '$PDS_PWD',
replacement: ""
},
{
pattern: '$INSTANCES',
replacement: "2"
},
{
pattern: '$NEWRELIC_TRACE_LVL',
replacement: "info"
}
]
}
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
strict: true,
globals: {
jQuery: true
},
ignores: ['dist/test/**/*.js']
},
files: ['Gruntfile.js', 'dist/**/*.js']
},
nodeunit: {
all: ['dist/test/*-tests.js']
},
'closure-compiler': {
build: {
closurePath: '.',
js: 'dist/**/*.js',
jsOutputFile: 'dist/server.min.js',
maxBuffer: 500,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
debug: false
// formatting: 'PRETTY_PRINT'
}
}
}
});
grunt.loadNpmTasks('grunt-closure-compiler');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['clean', 'copy:build', 'string-replace:dev', 'jshint', 'closure-compiler:build']);
grunt.registerTask('prod', ['clean', 'copy:build', 'string-replace:prod', 'jshint', 'closure-compiler:build']);
};
})();
On the CLI, you can just use "grunt" to spin up the DEV version or "grunt prod" to build the PROD version.