Jest (in React app) screen.debug not giving any oputput - jestjs

in my project screen.debug() is not printing any html.
In my test-config.js I had:
global.console.log = () => {};
global.console.group = () => {};
global.console.error = () => {};
To the above I added:
global.console.debug = jest.fn();
But no changes.
If I remove all of them, debug appears, as well as a lot of other data.
I then tried to replace the code above with:
global.console = {
...console,
// uncomment to ignore a specific log level
log: jest.fn(),
// debug: jest.fn(),
info: jest.fn(),
warn: jest.fn(),
error: jest.fn(),
};
But also this one does not show the debug output.
It shows instead information such as:
Cannot log after tests are done. Did you forget to wait for something async in your test?
How can I enable only the output of screen.debug()?
I am running:
"jest": "^24.8.0",
"jest-environment-jsdom-sixteen": "^2.0.0",
Can anyone please help?

Related

JEST with Express does not finish

I started to write tests with Jest of (nano)express application. The test starts the server at beforeAll() and closes it at afterAll(). I can see that the code is executed, but the JEST process does not end.
test.js
test('end to end test', async () => {
const polls = await axios.get(`http://localhost:3000/bff/polls/last`);
console.log(polls.data);
expect(polls.data).toBeDefined();
});
beforeAll(() => {
app.listen(3000, '0.0.0.0')
.then(r => logger.info("Server started"));
});
afterAll(() => {
if (app.close())
logger.info("Server stopped");
});
Output from npm run test
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 5.625s
Ran all test suites.
Jest did not exit one second after the test run has completed.
This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.
When I run with jest --config jest.config.js --detectOpenHandles the test does not finish as well but there is no error and I need to kill it anyway.
The complete source code is there: https://github.com/literakl/mezinamiridici/blob/master/infrastructure/test/api.int.test.js
I have tested separatelly outside of the tests that nanoexpress will terminate the process with app.close() call. So it is JEST related.
Update: the same behaviour with promises
test('end to end test', () => {
const polls = axios.get(`http://localhost:3000/bff/polls/last`);
return expect(polls).resolves.toBeDefined();
});
Update:
Here you can find minimum reproducible repository: https://github.com/literakl/nano-options.git
I have switched from Axios to GotJS and the trouble is still there. When I run the test with npm run test from command line now, it fails with:
Timeout - Async callback was not invoked within the 20000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 20000ms timeout specified by jest.setTimeout.Error
When I start the test from WebStorm there is no error but the process keeps running.
UPDATE
My initial thought was that this is a winston related issue but it appears that jest testEnvironment has to be set to node in order for Axios to run propertly using the axios/lib/adapters/http adapter. You can check a related issue here "detect jest and use http adapter instead of XMLhttpRequest".
Set testEnvironment: 'node' inside jest.config.js.
Update create user test to run the done callback function at the end:
describe("user accounts", () => {
test('create user', async (done) => {
// let response = await axios.get(`${API}/users/1234`);
let response = await axios.get(`${API}/users/1234`, getAuthHeader()); // TODO error with Authorization header
expect(response.data.success).toBeTruthy();
expect(response.data.data).toBeDefined();
let profile = response.data.data;
expect(profile.bio.nickname).toMatch("leos");
expect(profile.auth.email).toMatch("leos#email.bud");
// Call done here to let Jest know we re done with the async test call
done();
});
});
The root cause was an open handle of mongodb client. How did I find it?
1) install leakes-handle library
npm install leaked-handles --save-dev
2) import it to your test
require("leaked-handles");
3) the output
tcp handle leaked at one of:
at makeConnection (infrastructure\node_modules\mongodb\lib\core\connection\connect.js:274:20)
tcp stream {
fd: -1,
readable: true,
writable: true,
address: { address: '127.0.0.1', family: 'IPv4', port: 54963 },
serverAddr: null
}
If you cannot find the root cause, you can kill the JEST explicitelly with
jest --config jest.config.js --runInBand --forceExit
Here is another reason for me. I was using Puppeteer and because my target element was hidden the screenshot method threw error:
const browser = await puppeteer.launch({
headless: true,
executablePath: chromiumPath
});
const page = await browser.newPage();
await page.goto(`file://${__dirname}\\my.html`);
const element = await page.$("#my-element");
// This may throw errors
await element.screenshot({path: snapshotFileName});
await browser.close();
So, I made sure that the browser.close() was called no matter what:
try {
await element.screenshot({path: snapshotFileName});
} finally {
await browser.close();
}
Following works for my integration testing with Express, Nodejs, and Jest. Nothing special in package.json either: "test": "jest --verbose". Cheers
afterAll( async () => {
await mongoose.connection.close();
jest.setTimeout(3000);
});
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 4.818 s, estimated 5 s
Ran all test suites matching /users.test.js/i.

Protractor generates an error when disabling flow control to test an Angular app

I've been struggling with this error for a while and I'm running out of mana. I'm currently trying to test an Angular app with protractor and async/await. According to the doc, I have to disable the control flow by adding the following to my config file:
SELENIUM_PROMISE_MANAGER: false but doing so produces the following error:
UnhandledPromiseRejectionWarning: Error: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See https://github.com/angular/protractor/issues/2643 for details" I visited the url (https://github.com/angular/protractor/issues/2643) but it didn't turn out very helpful.
At this point I'm not sure if I'm doing something wrong or if it's a bug with protractor itself. For this reason I also opened an issue on GitHub.
Here is my test:
import {
browser,
ExpectedConditions,
$
} from 'protractor';
describe('When user click \"Test\" button', async () => {
beforeAll(async () => {
expect(browser.getCurrentUrl()).toContain('myawesomewebsite');
});
it ("should click the button", async () => {
var button = $(".button");
button.click();
});
});
And here is my full configuration:
exports.config = {
capabilities: {
'browserName': 'chrome'
},
seleniumAddress: 'http://localhost:4444/wd/hub',
framework: 'jasmine',
specs: ['test.spec.ts'],
SELENIUM_PROMISE_MANAGER: false,
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
},
beforeLaunch: function () {
require('ts-node/register')
}
};
You missed await before each protractor api invoking.
describe('When user click \"Test\" button', async () => {
beforeAll(async () => {
expect(await browser.getCurrentUrl()).toContain('myawesomewebsite');
});
it ("should click the button", async () => {
var button = $(".button");
await button.click();
});
});
So, thanks to #CrispusDH on GitHub, I figured out that I could use waitForAngularEnabled in the configuration file and not just in the spec file. Using it in the spec file was not working, but if used in the onPrepare hook of the configuration file, the error goes away.
A lot of resources online were saying to set it to false, but this wasn't working for me as Protractor couldn't find element without waiting for Angular, so I did set it to false in the configuration and file but called browser.waitForAngularEnabled(true); in my specs file (beforeAll hook). Now the error is gone, allowing me to use async/await.
Here is the proper configuration to use:
SELENIUM_PROMISE_MANAGER: false,
onPrepare: async () => {
await browser.waitForAngularEnabled(false);
}
And here is the code to call in spec file:
beforeAll(async () => {
browser.waitForAngularEnabled(true);
});

Sourcemaps in puppeteer?

I'm puppeteering (could this be a verb?) an app built with webpack and on page.on('error') I get errors like this:
TypeError: __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_promise___default.a.map is not a function
at _default.<anonymous> (....../app.js:23858:89)
at Generator.next (<anonymous>)
at step (....../app.js:35041:30)
at ....../app.js:35052:13
Is there a way, and if so how could I get these errors correctly sourcemapped?
(I know for sure I'm generating the sourcemaps)
I did it in the following way... A bit delayed but someone might find it useful.
Once you have navigated to the page throwing the error you inject this lib: https://github.com/novocaine/sourcemapped-stacktrace
await page.addScriptTag({
url: 'https://cdn.jsdelivr.net/npm/sourcemapped-stacktrace#1.1.8/dist/sourcemapped-stacktrace.js',
});
Then you listen for the error events:
page.on('pageerror', logStackTrace);
page.on('error', logStackTrace);
In the logStackTrace function you extract the sourcemapped stacktrace as follows and log it:
const logStackTrace = async (error) => {
page.evaluate(stack => new Promise(resolve =>
window.sourceMappedStackTrace.mapStackTrace(stack, (newStack) => {
resolve(newStack);
})
), typeof error.stack === 'string' ? error.stack : error.stack.join('\n'))
.then((result) => {
console.log('ERROR:', error.message, result[0]);
});
};
It only correctly maps the first line of the stack for me though. Still infinitely more useful.
If you use one of the eval variants for your webpack devtool then Puppeteer should pick it up:
// webpack.config.js
module.exports = {
// ...
mode: 'development',
devtool: 'eval-source-map',
};

Jest cannot handle the sequelize.sync() promise

I have this test file running with Jest:
test('this works', () => {
Promise.resolve();
});
test('this also works', (done) => {
setTimeout(done, 100);
});
test('this does not work', () => {
return models.sequelize.sync({force: true, logging: false});
});
test('this also does not work', (done) => {
models.sequelize.sync({force: true, logging: false}).then(() => done());
});
Something is either weird with Sequelize.js or Jest. Ideas?
To clarify: It's not I'm getting failing tests, all 4 tests are green. The latter two will get the database reset, but the Jest process will forever hang even after all test ran. Jest will say: 4 passed, just I have to manually quit with Ctrl + C.
As mentioned in this Github issue: https://github.com/sequelize/sequelize/issues/7953
The sync method actually will only return when the connection idles eventually, so the solution is to:
models.sequelize.sync({force: true, logging: false}).then(() => {
models.sequelize.close();
});

Jasmine ignoring typescript test files?

This is my first time making a project with Jasmine, and I'm following a tutorial but right off the bat having issues.
I've installed jasmine-node, typings, and typescript. I also ran:
typings install dt~jasmine --save-dev --global
For Jasmine typescript.
Now I have a test file in my ./spec folder that looks like this:
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { DatePickerComponent } from '../src/components/via-datepicker.component';
import * as moment from 'moment';
const Moment: any = (<any>moment).default || moment;
describe('DatePickerComponent', () => {
let component: DatePickerComponent;
let fixture: ComponentFixture<DatePickerComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DatePickerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatePickerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should open when clicked', () => {
fixture.debugElement.nativeElement.querySelector('body').click();
fixture.whenStable().then(() => {
expect(component.opened);
});
component.close();
});
describe('While open', () => {
beforeEach(() => {
component.open();
});
describe('Pressing the "Today\'s date" button', () => {
it('should set the value of the picker to the current date and close it', () => {
fixture.debugElement.nativeElement.querySelector('.datepicker-buttons button').click();
expect(Moment().isSame(component.value, 'day') && Moment().isSame(component.value, 'month'));
expect(!component.opened);
});
});
describe('Clicking on a date', () => {
it('should change the value of the picker and close it', () => {
let oldValue: any = component.value;
fixture.debugElement.nativeElement.querySelectorAll('.day')[10].click();
expect(!component.opened);
expect(!component.value.isSame(oldValue));
});
});
});
});
But when I run this command:
node_modules/jasmine-node/bin/jasmine-node spec
I get this result:
Finished in 0 seconds
0 tests, 0 assertions, 0 failures, 0 skipped
So clearly my test file is being ignored. Or maybe I'm missing some library? Would I receive an error message if this were the case? The main issue here is that I'm not being given much direction as to what the issue is, other than Jasmine doesn't seem to "see" the test file for some reason.
Just trying to move forward with my project. Any advice would be greatly appreciated.
It appears as if your test runner doesn't know that you're trying to run typescript tests. Are you using Karma as your test runner? If so, you need to add your Typescript files to your karma.config file and install karma-typescript and configure your karma.config file similar to what is shown below. Pay close attention to the addition to the frameworks, files, and preprocessors sections.
karma.config
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'karma-typescript'],
// list of files / patterns to load in the browser
files: [
{ pattern: "app/tests/**/*.spec.js"}
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
"app/tests/**/*.spec.ts": ["karma-typescript"]
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
})
};

Resources