Develop Reference

Webpack Loader/Plugin - Replace a variable in a string to output a new string

I am writing a custom webpack loader to remove unnecessary code that Terser can't pick up.
Here's the sample source output from webpack loader;
const SvgsMap = {
map1: () => {
return '1';
},
map2: () => {
return '2';
},
map3: () => {
return '3';
},
// ...redacted
map100: () => {
return '100';
},
}
Note that above comes into the loader as a string. And I have a whitelist of string[] as which of them that should be included in the build output;
const whitelistsArr = ["map1"]
I am currently writing a webpack loader to pre-process this before getting into bundled. Which currently uses Node VM that I assume could parse it to javascript object, in which then I can remove some of the unused properties in SvgsMap, then output it back again as a string.
My question is;
Am I doing it the right way with Loader to remove them? Or is it actually a webpack plugin job to do this? Any other alternatives?
I am hitting a rock doing this with VM, It seems like it's unable to mutate the existing code and output it back as a string. Am I wrong here?
Any suggestion is appreciated.
Here's my loader's code so far;
const path = require( 'path' );
const { loader } = require( 'webpack' );
const vm = require( 'vm' );
const whitelists = ['frame21Web'];
const loaderFn = function ( source ) {
/** #type {loader.LoaderContext} */
// eslint-disable-next-line babel/no-invalid-this
const self = this;
const filename = path.basename( self.resourcePath );
const templateWithoutLoaders = filename.replace( /^.+!/, '' ).replace( /\?.+$/, '' );
const vmContext = vm.createContext( { module: {} } );
let newSource = '';
try {
const vmScript = new vm.Script( source, { filename: templateWithoutLoaders } );
const cachedData = vmScript.createCachedData();
console.log(cachedData.toString()); // Doesn't seem to output as a string.
}
catch (err) {
console.error(err);
}
console.log( 'loader', filename, source );
process.exit( 0 );
return source;
};
module.exports = loaderFn;

There may be a couple answers to this question. Difficult to know without knowing the reasoning behind the removal.
If you have control of the file, you could use a combination of Webpack's Define plugin, and some if/else logic. For example
// in your WP config file
new webpack.DefinePlugin({
IS_CLIENT: JSON.stringify(true), // will only be true when compiled via WP
});
// in your module
if (process.env.IS_CLIENT) {
SvgsMap.map1 = () => '1';
}
The above pattern allows for adding/removing chunks of code for your Client bundle, while also allowing for use on the Server.
The other option would be to write a custom Babel plugin (not a WP plugin). I found this article helpful in the past, when I had to write some plugins. Babel gives you more control of how the parts of a JS file are processed, and you can use that plugin outside of WP (like while running Unit tests).

How to export from within an imported module's Promise?

I'm trying to work around the fact that I need to import a pure ESM package into a non-module. I can't change that fact about the script.
The workaround I'm trying to use is the import() function (a "dynamic import"). That returns a Promise instead of the actual module. I can't use await since I'm not in a module, so instead I'm using .then().
The pure ESM package (unist-util-visit) is used in a function exported by my script, which is then used in another script. So the import chain goes:
importer.js imports imported.js imports unist-util-visit
So the issue is that anything I export from within the .then() function in imported.js does not show up in importer.js.
And it's not even a timing issue. I used an EventEmitter to make importer.js wait until imported.js's .then() is done executing:
imported.js:
const EventEmitter = require('events');
module.exports.emitter = new EventEmitter();
module.exports.outsideFxn = function () {
console.log('hello');
}
import('unist-util-visit').then((unistUtilVisit) => {
module.exports.fxn = function() {
console.log(`unistUtilVisit: ${typeof unistUtilVisit}`);
}
module.exports.emitter.emit('ready');
});
importer.js:
import('./imported.js').then((imported) => {
console.log("In importer.js's .then():");
console.log(' fxn:', imported.fxn);
console.log(' outsideFxn:', imported.outsideFxn);
imported.emitter.on('ready', () => {
console.log("After imported.js is done:")
console.log(' fxn:', imported.fxn);
});
});
When I execute it, this is the output:
$ node importer.js
In importer.js's .then():
fxn: undefined
outsideFxn: [Function (anonymous)]
After imported.js is done:
fxn: undefined
What am I missing? Why are no exports being defined in the .then() function? How can I get my function exported?

Instead of
import('unist-util-visit').then((unistUtilVisit) => {
module.exports.fxn = function() {
console.log(`unistUtilVisit: ${typeof unistUtilVisit}`);
}
module.exports.emitter.emit('ready');
});
where you attempt to modify your module's exports after it has probably been consumed by dependents, why not export a promise that yields the function when it completes?
module.exports.fxnP =
import('unist-util-visit')
.then((unistUtilVisit) => () => {
console.log(`unistUtilVisit: ${typeof unistUtilVisit}`);
});
Now you consume it:
import('./imported.js').then((imported) => {
imported.fxnP.then((fxn) => {
fxn();
});
});
or, more neatly::
import('./imported.js')
.then(({fxnP}) => fxnP)
.then((fxn) => fxn());

You could use a custom require hook like jiti which can do exactly what you want synchronously.
Without hooking require:
$ node test.cjs
// test.cjs
const jiti = require('jiti')();
const unistUtilVisit = jiti("unist-util-visit");
Hooking require programmatically:
$ node test.cjs
// test.cjs
require('jiti')().register();
const unistUtilVisit = require("unist-util-visit");
Hooking require through a command line option:
$ node -r jiti/register test.cjs
// test.cjs
const unistUtilVisit = require("unist-util-visit");

Is there a reliable way to have Cypress exit as soon as a test fails?

We have a large test suite running on a CI server, and there appears to be no way of telling Cypress to exit if a test fails. It always runs the entire suite.
There is some discussion here, but no workable solution.
Is there a reliable way to have Cypress exit as soon as a test fails?

You can also use this Cypress plugin meanwhile Cypress does not support this feature natively: https://www.npmjs.com/package/cypress-fail-fast
Add the plugin to devDependencies:
npm i --save-dev cypress-fail-fast
Inside cypress/plugins/index.js:
module.exports = (on, config) => {
require("cypress-fail-fast/plugin")(on, config);
return config;
};
At the top of cypress/support/index.js:
import "cypress-fail-fast";

As you've mentioned, it's not officially supported yet (as of 3.6.0).
Here's my take at a hack (without the use of cookies and such for keeping state):
// cypress/plugins/index.js
let shouldSkip = false;
module.exports = ( on ) => {
on('task', {
resetShouldSkipFlag () {
shouldSkip = false;
return null;
},
shouldSkip ( value ) {
if ( value != null ) shouldSkip = value;
return shouldSkip;
}
});
}
// cypress/support/index.js
function abortEarly () {
if ( this.currentTest.state === 'failed' ) {
return cy.task('shouldSkip', true);
}
cy.task('shouldSkip').then( value => {
if ( value ) this.skip();
});
}
beforeEach(abortEarly);
afterEach(abortEarly);
before(() => {
if ( Cypress.browser.isHeaded ) {
// Reset the shouldSkip flag at the start of a run, so that it
// doesn't carry over into subsequent runs.
// Do this only for headed runs because in headless runs,
// the `before` hook is executed for each spec file.
cy.task('resetShouldSkipFlag');
}
});
Will skip all further tests once a failure is encountered. The output will look like:

How to add global commands to Jest like describe and it?

I'm writing a little testing tool for Jest (just to learn). It is called assertTruthy(msg, fn, args), expects a message, a function and arguments and should pass if the thing that is returned when the function is invoked with the arguments is truthy and fail if its not.
I would like to add it to Jest, so that you could call it without importing it in every environment.
describe('someFn()', () => {
// like 'it', 'describe' and 'expect' it should just be available here
it('is a function', () => {
expect(typeop someFN).toEqual('Function');
});
assertTruthy('it should return true', someFn, 3, 4);
});
I know Jest has setupFiles and setupFilesAfterEnv but I can't figure out how to use them to achieve this.
How do you add commands to Jest?
PS: On a single project basis (in CRA) I managed to do this like this:
// in src/setupFiles.js
const assertTruthy = // function definition ...
global.assertTruthy = assertTruthy

Add global functions to Jest
In order to add global functions to jest, you need to define setupFiles in your configuration and attach that function to the global object in the setup file:
module.exports = {
// ...
setupFiles: ['<rootDir>/setupFile.js'],
// ...
};
so if you want to do something very similar to it, I would suggest you do something like this:
// /setupFile.js
// in order to change an existing function (not youre case):
global.it = function(description, fn) { /* ... */ };
// this is how you define a new function globally
global.assertTruthy = (message, func, ...args) => {
return global.it(message, () => {
expect(func(...args)).toBeTruthy();
});
// optional: implementing the same interface as `jest.It`
Supporting the same interface as jest.It
Here's an example from the Airbnb library airbnb/jest-wrap where they wrapped the describe function. If you want to implement the jest.It interface, you'll also need to implement assertTruthy.todo, assertTruthy.skip, assertTruthy.only, & assertTruthy.each (check out the it interface). todo and skip are pretty easy since you want to do exactly the same as the original ones.
For each & only, we need to change the it function inside our implementation. A simple way to support only is by using a closure and passing the correct it function from the closure's inpu. each can be a little more complex to implement.
// /setupFile.js
// normaly, use the jest `it` function
global.assertTruthy = assertTruthyCreator(it);
// bypass for todo and skip
global.assertTruthy.todo = global.it.todo;
global.assertTruthy.skip = global.it.skip;
// only calls the same function but uses `only` internaly
global.assertTruthy.only = assertTruthyCreator(it.only);
// special case which needs special implementation
// see usage below
global.assertTruthy.each = assertTruthyCreator(it.each, true);
function assertTruthyCreator(itFunc, withTable) {
if (withTable) {
return (message, func, ...args) => {
return itFunc(args)(message, (...caseArgs) => {
expect(func(...caseArgs)).toBeTruthy();
});
};
}
return (message, func, ...args) => {
return itFunc(message, () => {
expect(func(...args)).toBeTruthy();
});
};
}
// usage:
assertTruthy.each(
'add numbers',
(a, b) => a + b,
[2, 4],
[4, 5],
[7, 9]);
How to use in test files
If you're using typescript for writing jest test, the first thing you'll need to do is declare your new function somewhere:
interface IGenericFunction {
(...args: any[]): any;
}
declare const assertTruthy: (message: string, func: IGenericFunction, ...args: any[]) => any;
With javascript, you can skip that step.
After that, just use it like you use describe and it:
const funcToTest = (a: number, b: number) => a + b;
describe("Test Suite", () => {
assertTruthy('this ran with assertTruthy', funcToTest, 5, 3);
test("another test", () => {
// ...
});
});
and jest will treat this as any other it function
Using as a node_module dependency
If you want to create a library from this, you can basically just pass a node_modules path to the setupFiles array.
For example, with this repository, you can do as follows:
Install using npm install --save-dev #kibibit/jest-utils
Add the following to your jest configuration
Use the function as described above
module.exports = {
// ...
setupFiles: ['node_modules/#kibibit/jest-utils/lib/jest-utils.js'],
// ...
};
and it should work the same as importing it locally.

Mock dependency in Jest with TypeScript

When testing a module that has a dependency in a different file and assigning that module to be a jest.mock, TypeScript gives an error that the method mockReturnThisOnce (or any other jest.mock method) does not exist on the dependency, this is because it is previously typed.
What is the proper way to get TypeScript to inherit the types from jest.mock?
Here is a quick example.
Dependency
const myDep = (name: string) => name;
export default myDep;
test.ts
import * as dep from '../depenendency';
jest.mock('../dependency');
it('should do what I need', () => {
//this throws ts error
// Property mockReturnValueOnce does not exist on type (name: string)....
dep.default.mockReturnValueOnce('return')
}
I feel like this is a very common use case and not sure how to properly type this.

You can use type casting and your test.ts should look like this:
import * as dep from '../dependency';
jest.mock('../dependency');
const mockedDependency = <jest.Mock<typeof dep.default>>dep.default;
it('should do what I need', () => {
//this throws ts error
// Property mockReturnValueOnce does not exist on type (name: string)....
mockedDependency.mockReturnValueOnce('return');
});
TS transpiler is not aware that jest.mock('../dependency'); changes type of dep thus you have to use type casting. As imported dep is not a type definition you have to get its type with typeof dep.default.
Here are some other useful patterns I've found during my work with Jest and TS
When imported element is a class then you don't have to use typeof for example:
import { SomeClass } from './SomeClass';
jest.mock('./SomeClass');
const mockedClass = <jest.Mock<SomeClass>>SomeClass;
This solution is also useful when you have to mock some node native modules:
import { existsSync } from 'fs';
jest.mock('fs');
const mockedExistsSync = <jest.Mock<typeof existsSync>>existsSync;
In case you don't want to use jest automatic mock and prefer create manual one
import TestedClass from './TestedClass';
import TestedClassDependency from './TestedClassDependency';
const testedClassDependencyMock = jest.fn<TestedClassDependency>(() => ({
// implementation
}));
it('Should throw an error when calling playSomethingCool', () => {
const testedClass = new TestedClass(testedClassDependencyMock());
});
testedClassDependencyMock() creates mocked object instance
TestedClassDependency can be either class or type or interface

Use the mocked helper
like explained here
// foo.spec.ts
import { foo } from './foo'
jest.mock('./foo')
// here the whole foo var is mocked deeply
const mockedFoo = jest.mocked(foo, true)
test('deep', () => {
// there will be no TS error here, and you'll have completion in modern IDEs
mockedFoo.a.b.c.hello('me')
// same here
expect(mockedFoo.a.b.c.hello.mock.calls).toHaveLength(1)
})
test('direct', () => {
foo.name()
// here only foo.name is mocked (or its methods if it's an object)
expect(jest.mocked(foo.name).mock.calls).toHaveLength(1)
})

There are two solutions tested for TypeScript version 3.x and 4.x, both are casting desired function
1) Use jest.MockedFunction
import * as dep from './dependency';
jest.mock('./dependency');
const mockMyFunction = dep.myFunction as jest.MockedFunction<typeof dep.myFunction>;
2) Use jest.Mock
import * as dep from './dependency';
jest.mock('./dependency');
const mockMyFunction = dep.default as jest.Mock;
There is no difference between these two solutions. The second one is shorter and I would therefore suggest using that one.
Both casting solutions allows to call any jest mock function on mockMyFunction like mockReturnValue or mockResolvedValue
https://jestjs.io/docs/en/mock-function-api.html
mockMyFunction.mockReturnValue('value');
mockMyFunction can be used normally for expect
expect(mockMyFunction).toHaveBeenCalledTimes(1);

I use the pattern from #types/jest/index.d.ts just above the type def for Mocked (line 515):
import { Api } from "../api";
jest.mock("../api");
const myApi: jest.Mocked<Api> = new Api() as any;
myApi.myApiMethod.mockImplementation(() => "test");

Cast as jest.Mock
Simply casting the function to jest.Mock should do the trick:
(dep.default as jest.Mock).mockReturnValueOnce('return')

Use as jest.Mock and nothing else
The most concise way of mocking a module exported as default in ts-jest that I can think of really boils down to casting the module as jest.Mock.
Code:
import myDep from '../dependency' // No `* as` here
jest.mock('../dependency')
it('does what I need', () => {
// Only diff with pure JavaScript is the presence of `as jest.Mock`
(myDep as jest.Mock).mockReturnValueOnce('return')
// Call function that calls the mocked module here
// Notice there's no reference to `.default` below
expect(myDep).toHaveBeenCalled()
})
Benefits:
does not require referring to the default property anywhere in the test code - you reference the actual exported function name instead,
you can use the same technique for mocking named exports,
no * as in the import statement,
no complex casting using the typeof keyword,
no extra dependencies like mocked.

The latest jest allows you to do this very easily with jest.mocked
import * as dep from '../dependency';
jest.mock('../dependency');
const mockedDependency = jest.mocked(dep);
it('should do what I need', () => {
mockedDependency.mockReturnValueOnce('return');
});

Here's what I did with jest#24.8.0 and ts-jest#24.0.2:
source:
class OAuth {
static isLogIn() {
// return true/false;
}
static getOAuthService() {
// ...
}
}
test:
import { OAuth } from '../src/to/the/OAuth'
jest.mock('../src/utils/OAuth', () => ({
OAuth: class {
public static getOAuthService() {
return {
getAuthorizationUrl() {
return '';
}
};
}
}
}));
describe('createMeeting', () => {
test('should call conferenceLoginBuild when not login', () => {
OAuth.isLogIn = jest.fn().mockImplementationOnce(() => {
return false;
});
// Other tests
});
});
This is how to mock a non-default class and it's static methods:
jest.mock('../src/to/the/OAuth', () => ({
OAuth: class {
public static getOAuthService() {
return {
getAuthorizationUrl() {
return '';
}
};
}
}
}));
Here should be some type conversion from the type of your class to jest.MockedClass or something like that. But it always ends up with errors. So I just used it directly, and it worked.
test('Some test', () => {
OAuth.isLogIn = jest.fn().mockImplementationOnce(() => {
return false;
});
});
But, if it's a function, you can mock it and do the type conversation.
jest.mock('../src/to/the/Conference', () => ({
conferenceSuccessDataBuild: jest.fn(),
conferenceLoginBuild: jest.fn()
}));
const mockedConferenceLoginBuild = conferenceLoginBuild as
jest.MockedFunction<
typeof conferenceLoginBuild
>;
const mockedConferenceSuccessDataBuild = conferenceSuccessDataBuild as
jest.MockedFunction<
typeof conferenceSuccessDataBuild
>;

As of Jest 24.9.0 here is how you can mock and correctly type both your Class/Object/function and Jest properties.
jest.MockedFunction
jest.MockedClass
What we would like for a typed mock is that the mocked object type contains the union of the mocked object type and the type of Jest mocks.
import foo from 'foo';
jest.mock('foo');
const mockedFoo = foo as jest.MockedFunction<typeof foo>;
// or: const mockedFooClass = foo as jest.MockedClass<typeof FooClass>;
mockedFoo.mockResolvedValue('mockResult');
// Or:
(mockedFoo.getSomething as jest.MockedFunction<typeof mockedFoo.getSomething>).mockResolvedValue('mockResult');
As you can see, you can either manually cast what you need or you'll need something to traverse all foo's properties/methods to type/cast everything.
To do that (deep mock types) you can use jest.mocked() introduced in Jest 27.4.0
import foo from 'foo';
jest.mock('foo');
const mockedFoo = jest.mocked(foo, true);
mockedFoo.mockImplementation() // correctly typed
mockedFoo.getSomething.mockImplementation() // also correctly typed

I have found this in #types/jest:
/**
* Wrap a function with mock definitions
*
* #example
*
* import { myFunction } from "./library";
* jest.mock("./library");
*
* const mockMyFunction = myFunction as jest.MockedFunction<typeof myFunction>;
* expect(mockMyFunction.mock.calls[0][0]).toBe(42);
*/
Note: When you do const mockMyFunction = myFunction and then something like mockFunction.mockReturnValue('foo'), you're a changing myFunction as well.
Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jest/index.d.ts#L1089

The top rated solution by Artur Górski does not work with the last TS and Jest.
Use MockedClass
import SoundPlayer from '../sound-player';
jest.mock('../sound-player'); // SoundPlayer is now a mock constructor
const SoundPlayerMock = SoundPlayer as jest.MockedClass<typeof SoundPlayer>;

A recent library solves this problem with a babel plugin: https://github.com/userlike/joke
Example:
import { mock, mockSome } from 'userlike/joke';
const dep = mock(import('./dependency'));
// You can partially mock a module too, completely typesafe!
// thisIsAMock has mock related methods
// thisIsReal does not have mock related methods
const { thisIsAMock, thisIsReal } = mockSome(import('./dependency2'), () => ({
thisIsAMock: jest.fn()
}));
it('should do what I need', () => {
dep.mockReturnValueOnce('return');
}
Be aware that dep and mockReturnValueOnce are fully type safe. On top, tsserver is aware that depencency was imported and was assigned to dep so all automatic refactorings that tsserver supports will work too.
Note: I maintain the library.

This is ugly, and in fact getting away from this ugliness is why I even looked at this question, but to get strong typing from a module mock, you can do something like this:
const myDep = (require('./dependency') as import('./__mocks__/dependency')).default;
jest.mock('./dependency');
Make sure you require './dependency' rather than the mock directly, or you will get two different instantiations.

For me this was enough:
let itemQ: queueItemType
jest.mock('../dependency/queue', () => {
return {
add: async (item: queueItemType, ..._args: any) => {
// then we can use the item that would be pushed to the queue in our tests
itemQ = item
return new Promise(resolve => {
resolve('Mocked')
})
},
}
})
Then, whenever the add method is called it will execute this code above instead of pushing it to the queue, in this case.

With TypeScript 2.8 we can do like this with ReturnType:
import * as dep from "./depenendency"
jest.mock("./dependency")
const mockedDependency = <jest.Mock<ReturnType<typeof dep.default>>>dep.default
it("should do what I need", () => {
mockedDependency.mockReturnValueOnce("return")
})