Jest configuration with multiple moduleNameMapper - nest

I have a requirement where I need to map my libs as an expanded path in the Jest config moduleNameMapper configuration.
Along with that I also need to provide one axois as the name module mapping.
How can I do both in the moduleNameMapper in jest-e2e.js?
Here is my existing jest-e2e.js file:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' }),
};
My tsconfig.json looks like:
{
"paths": {
"#app/logger": [
"libs/logger/src"
],
}
}
I want to add one more moduleNameMapping which is not there in the tsconfig.json.
Basically, I want to add this mapping as well:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
}
How may I combine both the stuffs into the same moduleNameMapper clause in the jest config file.
This is what I have tried so far:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
const libNameMapping = pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' });
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: {
'^axios$': require.resolve('axios'),
...libNameMapping,
},
};
So basically how can both the axios and the nameMapping can be combined and applied to the moduleNameMapper portion of the configuration. That's the query here.
Now if I want to add it like without any helper, like below, it also does not work:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
'^#app/(.*)$': '<rootDir>/../../../libs/$1/src',
},
The path are not resolved, gives this error:
Configuration error:
Could not locate module #app/common/const mapped as:
C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#app\/(.*)$/": "C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src"
},
"resolver": undefined
}
1 | import { createParamDecorator, ExecutionContext } from '#nestjs/common';
> 2 | import { constants } from '#app/common/const';
I think I have to use the Jest helper method. But how can I do it combining both axois and my libs name mapping, is not getting it.

Related

rollup watch include directory

I am trying with following rollup.config.js file
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import copy from 'rollup-plugin-copy'
import clean from 'rollup-plugin-clean';
export default [
{
input: "src/index.ts",
external: Object.keys(pkg.peerDependencies || {}),
watch: {
skipWrite: false,
clearScreen: false,
include: 'src/**/*',
//exclude: 'node_modules/**',
// chokidar: {
// paths: 'src/**/*',
// usePolling: false
// }
},
plugins: [
clean(),
copy({
targets: [
{ src: 'src/*', dest: 'dist' }
]
}),
typescript({
typescript: require("typescript"),
include: [ "*.ts+(|x)", "**/*.ts+(|x)", "*.d.ts", "**/*.d.ts" ]
}),
],
output: [
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "esm" },
{
file: "example/src/reactComponentLib/index.js",
format: "es",
banner: "/* eslint-disable */"
}
]
}
];
I want to rebuild when anything in src changes. I have couple of files which are not imported in .js and .ts files but I want them to copy in dist folder. copy is working fine but the watch is not picking up changes in those other files. Tried alot of variations on chokidar options but no luck yet.
Anyone have any idea how to resolve this?
watch.include only works on files pertaining to the module graph so if they are not imported they won't be included (https://rollupjs.org/guide/en/#watchinclude).
You can solve this by creating a small plugin that calls this.addWatchFile on those external files when the build starts. Here is an example:
plugins: [
{
name: 'watch-external',
buildStart(){
this.addWatchFile(path.resolve(__dirname, 'foo.js'))
}
}
]
Combine it with some globbing utility such as fast-glob and just call this.addWatchFile for every file you want to copy:
import fg from 'fast-glob';
export default {
// ...
plugins: [
{
name: 'watch-external',
async buildStart(){
const files = await fg('src/**/*');
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}

How to add option for babel loader in customize-cra?

I'm hitting Support for the experimental syntax 'classProperties' isn't currently enabled
I need to add something like the following to my webpack config.
https://github.com/babel/babel/issues/8655
{
loader: 'babel-loader',
options: {
"presets": [
"#babel/preset-env",
"#babel/preset-react",
{
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
],
},
}
Although I'm using customize-cra and need to add it through config-overrrides.js and I tried
module.exports = override(
...addBabelPresets("#babel/preset-env", "#babel/preset-react"),
...addBabelPlugins('#babel/plugin-proposal-class-properties'),
# other lines omitted for brevity
)
Try defining the plugins and presets in a .babelrc file, use the useBabelRc loader in your config:
//config-override.js
const { useBabelRc, override } = require("customize-cra");
module.exports = override(
useBabelRc()
);
and then in the .babelrc
//.babelrc
const presets = ["#babel/preset-env","#babel/preset-react"]
const plugins = [
["#babel/plugin-proposal-class-properties"]
];
module.exports = {
presets,
plugins,
};
//config-override.js
const { useBabelRc, override } = require("customize-cra");
module.exports = override(
useBabelRc()
);
//.babelrc
{
"presets": [
["#babel/preset-react"],
["#babel/preset-env"]
],
"plugins": ["#babel/plugin-proposal-class-properties"]
}

How to use jsx in vuepress?

Config
// ./docs/.vuepress/config.js
module.exports = {
...
chainWebpack: (config, isServer) => {
config.module
.rule("js") // Find the rule.
.use("babel-loader") // Find the loader
.tap(options =>
merge(options, {
presets: [
["#babel/preset-env"],
["#vue/babel-preset-jsx", { injectH: false }]
],
plugins: [
[
"import",
{
libraryName: "ant-design-vue",
libraryDirectory: "es",
style: "css"
}
],
"#babel/plugin-proposal-optional-chaining"
]
})
);
}
}
The config didn't work, when I ran the code I met the following error.
Error
Uncaught Error: Module parse failed: Unexpected token (87:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| },
| render(h) {
return <a-tree></a-tree>;
| }
| };
Could someone give me the right config?

webpack not able to import images( using express and angular2 in typescript)

I am not able to import images in my headercomponent.ts.
I suspect it is because of something i am doing wrong while compiling ts(using webpack ts loader) because same thing works with react( where the components are written in es6)
The error location is
//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR** Cannot find module '../../images/logo.png'
#Component({
selector: 'my-header',
//templateUrl:'components/header/header.tmpl.html' ,
template: `<header class="main-header">
<div class="top-bar">
<div class="top-bar-title">
<img src="{{logoSource}}">
</div>
my webpack config is
// webpack.config.js
'use strict';
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports = {
entry: path.join(basePath,'/components/boot/boot.ts'),
output: {
path: path.join(basePath,"..","/build"), // This is where images AND js will go
publicPath: path.join(basePath,"..","/build/assets"),
// publicPath: path.join(basePath ,'/images'), // This is used to generate URLs to e.g. images
filename: 'bundle.js'
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
module: {
preLoaders: [ { test: /\.tsx$/, loader: "tslint" } ],
//
loaders: [
{ test: /\.(png!jpg)$/, loader: 'file-loader?name=/img/[name].[ext]' }, // inline base64 for <=8k images, direct URLs for the rest
{
test: /\.json/,
loader: 'json-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/]
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: [/node_modules/],
loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
},
// fonts and svg
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
]
},
resolve: {
// now require('file') instead of require('file.coffee')
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6', 'png']
},
devtool: 'source-map'
};
and my directory structure looks like this
-/
-server/
-build/
-node-modules/
-public/
-components/
-boot/
-boot.component.ts
-header/
-header.component.ts
-images/
-logo.png
-services/
-typings/
-browser/
-main/
-browser.d.ts
-main.d.ts
-tsconfig.json
-typings.json
my tsconfig file is as follows:
//tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
I suspect I am messing some thing in typescript compilation , not sure what
The problem is that you confuse TypeScript level modules and Webpack level modules.
In Webpack any file that you import goes through some build pipeline.
In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, Webpack config is not used by TypeScript.
In your case you need to separate the concerns, use import from for TypeScript/EcmaScript code and use require for Webpack specifics.
You would need to make TypeScript ignore this special Webpack require syntax with a definition like this in a .d.ts file:
declare function require(string): string;
This will make TypeScript ignore the require statements and Webpack will be able to process it in the build pipeline.
Instead of:
import image from 'pathToImage/image.extension';
Use:
const image = require('pathToImage/image.extension');
I'm using
import * as myImage from 'path/of/my/image.png';
and created a typescript definition with
declare module "*.png" {
const value: any;
export = value;
}
This only works when you have a correct handler like the file-loader in webpack. Because this handler will give you a path to your file.
A small improvement to Christian Stornowski's answer would be to make the export default, i.e.
declare module "*.png" {
const value: string;
export default value;
}
So you can import an image using:
import myImg from 'img/myImg.png';
I also had same issue so I used following approach:
import * as myImage from 'path/of/my/image';
In my component I simply assigned the imported image to a data member;
export class TempComponent{
public tempImage = myImage;
}
and used it in template as:
<img [src]="tempImage" alt="blah blah blah">
If you want to use the ES6 syntax for importing.
First be sure that in your tsconfig.json you have:
target: 'es5',
module: 'es6'
The following should now work:
import MyImage from './images/my-image.png';
To be able to use default import like this:
import grumpyCat from '../assets/grumpy_cat.jpg';
Define jpg module declaration:
declare module "*.jpg" {
const value: string;
export default value;
}
and in your tsconfig use "module": "es6" (see #vedran comment above) or when you use "module": "commonjs" add "esModuleInterop": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"esModuleInterop": true,
...
Source: https://github.com/TypeStrong/ts-loader/issues/344#issuecomment-381398818

shim specified file cannot load after optimized with r.js

i have a following requirejs configuration in my code:
require.config({
baseUrl: "js",
// urlArgs: 'cb=' + Math.random(),
deps:["config","app"],
paths: {
'jquery' : 'jquery/jquery',
'jquerymobile.config' : 'mobile/jquerymobile.config',
'jquerymobile': 'mobile/jquery.mobile-1.3.1.min' ,
'underscore': 'underscore-amd/underscore-min',
'backbone' : 'backbone-amd/backbone-min',
text: 'plugins/text'
},
shim: {
underscore: {
exports: "_"
},
'jquery' : 'jquery',
'jquerymobile.config' : ['jquery'],
jquerymobile : {
deps : ["jquery", 'jquerymobile.config']
},
backbone: {
deps: ['underscore', 'jquery', 'jquerymobile'],
exports: 'Backbone'
}
}
});
inside jquerymobile.config file i have console log statement, which cannot be seen after optimization with following build profile (build.js):
({
appDir: '../',
baseUrl: 'js',
dir: '../../dist',
name: 'config',
skipDirOptimize:true,
fileExclusionRegExp: /^(r|build)\.js$/,
excludeShallow: ['settings'],
mainConfigFile: '../js/config.js',
optimizeCss: 'standard',
removeCombined: true,
deps:["config","app"]
})
I have a feeling that r.js ignoring the shim, dependecies,\n
is there any workaround?
thanks for help
Please try the following way:
include your jquerymobile.config in main.js require dependencies list:
require(['app', 'jquerymobile.config', 'jquerymobile'], function(App) {
App.initialize();
});