Develop Reference

React/Jest use either mock window value or resolve error

My app uses the window object to inject environmental variables at runtime for docker, however my tests are coming back with the error below:
url config:
declare const window: Window &
typeof globalThis & {
_env_: any
}
export const url = window._env_.REACT_APP_API_URL;
export const baseUrl = url;
error in tests as the handlers use the baseUrl, but even if I change the handlers to hardcoded values the below error comes:
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'REACT_APP_API_URL')
4 | }
5 |
> 6 | export const url = window._env_.REACT_APP_API_URL;
| ^
7 | export const baseUrl = url;
setupTests.tsx
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '#testing-library/jest-dom';
import { setLogger } from 'react-query'
import { server } from './mocks/server'
declare const window: Window &
typeof globalThis & {
_env_: any
}
window._env_.REACT_APP_API_URL = "https://wwww.xxxxx.com"
beforeAll(() => server.listen())
// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())
// Clean up after the tests are finished.
afterAll(() => server.close())
// silence react-query errors
setLogger({
log: console.log,
warn: console.warn,
error: () => {},
})
Any idea's? So where ever there is an api call I get this error in the tests for jest/React.

you can mock the global window var
test/setup.js
window.env. REACT_APP_API_URL = 'something';
then you need to add in package.json file
"jest": {
"setupFiles": [
"./test/setup.js"
],
OR
you can define global var in CLI like this
npm run jest -- --globals='{"window": "someUrl", "value": "someValue"}'

When unit testing a class method, how do I mock a function it calls--one defined in an imported module?

I am unit testing a particular method, and am having issues mocking another function that is called during the process. In my case, the method to test is defined in a class, and the function I'd like to mock is defined in a separate module. How do I mock this function? See below for my code.
In the past, I've used the Sinon package to mock/stub a dependency (example). But that doesn't work in this case. This is the first time I'm testing a method defined in a class, so perhaps that's why mocking the dependency isn't working.
My Code
Module Containing Test Function (myLib/myDir/combo.js)
const { externalFunction } = require('./external-function')
class Combo {
constructor(props) {}
async myMethod () {// The function under test.
externalFunction()
}
}
const myCombo = props => new Combo(props)
module.exports = { myCombo }
My Test File (test/myLib/myDir/combo.test.js); no attempt at mocking
const { myCombo } = require('../../../myLib/myDir/combo')
const comboObj = myCombo({}) // Instantiate object to expose method to test.
await comboObj.myMethod()// Call method that I want to test. This throws type error because myMethod function calls externalFunction, which throws an error in the test environment.
My Test File (test/myLib/myDir/combo.test.js); attempt to use Sinon package to mock
const sinon = require('sinon')
const dependencyModule = require('./external-function')// Defines the method dependencyModule.methodToMock
const myStub = sinon.stub(dependencyModule, 'methodToMock').returns(555) // Stubs dependencyModule.methodToMock and ensures it always returns the value: 555.
const comboObj = myCombo({}) // Instantiate object to expose method to test.
await comboObj.myMethod()// Call method that I want to test. This throws type error because myMethod function calls externalFunction, which throws an error in the test environment.

How? You need to follow "stubbed module can not be destructured." on the official guide How to stub a dependency of a module
For example I have file external-function.js, combo.js and test.js on the same directory. I choose to use console.log to show that stub works and fake function get called, because you are not expecting something returned on myMethod.
// File: external-function.js
function externalFunction () {
console.log('Original Called');
}
module.exports = { externalFunction };
// File: combo.js
// Note: "stubbed module can not be destructured."
const externalFunction = require('./external-function')
class Combo {
constructor(props) {}
async myMethod () {
externalFunction.externalFunction()
}
}
const myCombo = props => new Combo(props)
module.exports = { myCombo };
// File: test.js
const sinon = require('sinon');
const { myCombo } = require('./combo');
const dependencyModule = require('./external-function');
describe('myCombo', () => {
it('myMethod', async () => {
sinon.stub(dependencyModule, 'externalFunction').callsFake(() => {
console.log('Fake Called');
});
const comboObj = myCombo({});
await comboObj.myMethod();
});
});
When I run it using nyc and mocha on my terminal:
$ npx nyc mocha test.js
myCombo
Fake Called
✓ myMethod
1 passing (3ms)
----------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------------|---------|----------|---------|---------|-------------------
All files | 85.71 | 100 | 75 | 83.33 |
combo.js | 100 | 100 | 100 | 100 |
external-function.js | 50 | 100 | 0 | 50 | 2
----------------------|---------|----------|---------|---------|-------------------

Javascript nodeJs Postgres pg unit test

I'm using PG library to connecting to Postgres DB,
Now, I want to write unit tests for database access and I don't know how I can do that. Actually, I need some mock Postgres server or something to mock Postgres.
I'm using Mocha for testing
below is one of my classes to access database
import { Pool } from "pg";
export class DbAccess implements IdbAccess {
private static readonly postgres = new Pool();
constructor(#inject(TYPES.ILogger) private readonly logger: ILogger) {}
public saveConsumer(consumer: IAPIGWConsumer): Promise<IAPIGWConsumer> {
return this.queryOne`
INSERT INTO users (consumer_id, email)
VALUES (${consumer.consumer_id}, ${consumer.email})
ON CONFLICT (consumer_id) DO UPDATE SET email = ${consumer.email}
RETURNING *
`;
}
}
I would appreciate any help, thank you.

If you want to mock or stub some package/method/module, you need to install a mock/stub library such as sinon.js, jest.js to achieve this.
Here is the unit test solution using sinon.js. For simplicity and clarity, I've removed unnecessary parts, such as DI.
db.ts:
import { Pool } from "pg";
export class DbAccess {
private static readonly postgres = new Pool();
public saveConsumer(consumer) {
return DbAccess.postgres.query(`
INSERT INTO users (consumer_id, email)
VALUES (${consumer.consumer_id}, ${consumer.email})
ON CONFLICT (consumer_id) DO UPDATE SET email = ${consumer.email}
RETURNING *
`);
}
}
db.test.ts:
import pg from "pg";
import sinon from "sinon";
import { expect } from "chai";
describe("59624370", () => {
afterEach(() => {
sinon.restore();
});
it("should pass", async () => {
const mPool = { query: sinon.stub().resolves({ rows: [] }) };
const poolStub = sinon.stub(pg, "Pool").callsFake(() => mPool);
const { DbAccess } = require("./db");
const db = new DbAccess();
const consumer = { consumer_id: 1, email: "example#gmail.com" };
const actual = await db.saveConsumer(consumer);
expect(actual).to.be.eql({ rows: [] });
sinon.assert.calledOnce(poolStub);
sinon.assert.calledOnce(mPool.query);
});
});
Unit test results with coverage report:
59624370
✓ should pass (132ms)
1 passing (141ms)
------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
------------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
db.test.ts | 100 | 100 | 100 | 100 | |
db.ts | 100 | 100 | 100 | 100 | |
------------|----------|----------|----------|----------|-------------------|
Source code: https://github.com/mrdulin/mocha-chai-sinon-codelab/tree/master/src/stackoverflow/59624370

Mocking process methods in Jest

I have electron-util.js file I want to cover with tests:
const isElectron = "electron" in process.versions;
const isUsingAsar =
isElectron &&
process.mainModule &&
process.mainModule.filename.includes("app.asar");
export const fixPathForAsarUnpack = path =>
isUsingAsar ? path.replace("app.asar", "app.asar.unpacked") : path;
In order to test fixPathForAsarUnpack method I need to mock versions and mainModule from process. I tried to do it like this:
import { fixPathForAsarUnpack } from "../src/electron-util";
test("fixes path for Electron", () => {
process.versions = {
electron: "0.0.0",
mainModule: {
filename: "/app.asar/index.html"
}
};
const path =
"/Users/relix/My.app/Contents/Resources/app.asar/node_modules/foo/binary";
expect(fixPathForAsarUnpack(path)).toBe(
"/Users/relix/My.app/Contents/Resources/app.asar.unpack/node_modules/foo/binary"
);
});
But it throws an error:
● fixes path for Electron
TypeError: Cannot assign to read only property 'versions' of object '[object process]'
4 |
5 | test("fixes path for Electron", () => {
> 6 | process.versions = {
| ^
7 | electron: "0.0.0",
8 | mainModule: {
9 | filename:
at Object.<anonymous>.test (__test__/electron-util.test.js:6:3)
What am I doing wrong, how should I mock process object?

You should mock the process in this way:
const originalProcess = process
global.process = {...originalProcess, version: "your code here"}
// do the test
// ...
// restore the original process object for next tests
global.process = originalProcess

Transpile Model View Controller in Javascript

I want to use Gulp, Rollup and Babel to transpile ES6 app to ES5 (that use the module reveal pattern with IIFE).
The gulp file:
var gulp = require('gulp');
var rollup = require('gulp-better-rollup');
var babel = require('rollup-plugin-babel');
gulp.task('roll', function () {
return gulp.src('_01_src/js/form/*.js')
.pipe(rollup(
{plugins: [babel({presets: ['es2015-rollup']})]},
{format: 'iife',}
)
)
.pipe(gulp.dest('_02_build/js/form/'));
});
The controller import model and view and is transpiled ok:
var controller = (function (model) {
'use strict';
model = 'default' in model ? model['default'] : model;
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var Cat = function Cat(name) {
classCallCheck(this, Cat);
this.name = name;
};
return Cat;
}(model));
The problem that I have is when I want to group together (to avoid collision) like this is not working:
( function() { var model = function () { ... }()
var view = function () { ... }()
var controller = function (model, view) {
......
}(model, view) )}()
I have multiple app that contains MVC and I want first to group and app together than group all app;
So I start:
js
app1
- model.js
- view.js
- controller.js
app2
- model.js
- view.js
- controller.js
app3
- model.js
- view.js
- controller.js
After task run I want to have, which don't collide:
js
app1.js
app2.js
app3.js

I have partial working example from the rollup-stream in github team/users, but only works for an app(and not exactly transpiled as MVC), not with multiple apps.
const gulp = require('gulp');
const scss = require('gulp-sass');
const babel = require('gulp-babel');
const watch = require('gulp-watch');
const autopre = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const rollup = require('rollup-stream');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
gulp.task('rollup', function () {
return rollup({
entry: '_01_src/js/form/app.js',
format: 'iife',
})
// turn the raw text stream into a stream containing one streaming Vinyl file.
.pipe(source('form.js'))
// buffer that file's contents. most gulp plugins don't support streaming files.
.pipe(buffer())
// transform the files.
.pipe(babel({
presets: ['es2015']
}))
// and output to _02_build/js/form.js as normal.
.pipe(gulp.dest('_02_build/js'));
});

would this help? I think create tasks for each app, you mentioned before group together it transpile OK
const path = require('path')
const fs = require('fs-extra')
const gulp = require('gulp')
const rollup = require('gulp-better-rollup')
const babel = require('rollup-plugin-babel');
// suppose your project looks like
// --project
// | +-gulpfile.js
// | +-src
// | | +-app1
// | | | +-controller.js
// | | | +-model.js
// | | | +-view.js
// | | +-app2
// the target path where your apps locates,
var targetPath = path.join(__dirname, 'src')
// files will build into
var destTargetPath = path.join(__dirname, 'dest')
// find app1,app2.... and exclude node_modules
var dirs = fs.readdirSync(targetPath).filter((filename) => {
if (filename === 'node_modules') return false
var stat = fs.statSync(path.join(targetPath, filename))
return stat.isDirectory()
})
// I want a task name for each app
var dir2task = dir => 'x_' + dir
// add tasks for each app
dirs.forEach((dir) => {
// as it worked for single app
gulp.task(dir2task(dir), () => {
//this return means tells gulp when job is done
return gulp.src(path.join(targetPath, dir) + '/**/*.js')
.pipe(rollup({
plugins: [babel({
presets: ['es2015-rollup']
})]
}, {
format: 'iife',
}))
.pipe(gulp.dest(path.join(destTargetPath, dir)))
})
})
// run them all and after all apps built,and copy or rename your built controller to appx.js, there's no need for return, my mistake
gulp.task('default', dirs.map(dir2task), () => {
dirs.forEach((dir) => {
fs.copySync(path.join(destTargetPath, dir, 'controller.js'), path.join(destTargetPath, dir + '.js'))
})
})
// result will be
// --project
// | +-gulpfile.js
// | +-src
// | | +-app1
// | | +-....
// | +-dist
// | | +-app1.js
// | | +-app2.js

You can use static variable.
Here's how to make model, view, and controller as static variable.
function a_project () {
}
a_project.model = function(){};
a_project.view = function(){};
a_project.controller = function(){};
var myInstance = new MyClass();
This will help you to call model, view and controller variable.