Set up Cypress IO to work with dotenv on Quasar Framework - vue.js

I'm using Quasar framework and just after I've added quasar-dotenv package I realized that e2e tests not working.
Uncaught TypeError: fs.readFileSync is not a function
This error originated from your test code, not from Cypress.
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
Check your console for the stack trace or click this message to see where it originated from.
at Object.config (http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:141291:34)
at Object.746.eslint (http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:150393:36)
at o (http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:1:265)
at http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:1:316
at Object.747.../../../../quasar.conf.js (http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:150535:35)
at o (http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:1:265)
at r (http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:1:431)
at http://localhost:8080/__cypress/tests?p=test/cypress/integration/home/init.spec.js-312:1:460
I've tried to set up the Cypress environment by adding the test/cypress/plugins/cypress.env.json file with some data, as well as changing the test/cypress/plugins/index.js file in the same folder, by following this documentation as it was suggested here:
const env = require('quasar-dotenv').config()
module.exports = (on, config) => {
// config.env.API_URL = 'http://example.com' // not working
config.env = env
// Chrome:: Hack for shaking AUT. Cypress Issue: https://github.com/cypress-io/cypress/issues/1620
on('before:browser:launch', (browser = {}, args) => {
if (browser.name === 'chrome') {
args.push('--disable-blink-features=RootLayerScrolling');
return args;
}
return true;
});
return config
};
MacOS Catalina
Cypress v3.5.0
Chrome v77

I don't know the answer because I am unfamiliar with quasar-dotenv. Have you tried the official quasar dotenv app extension? https://github.com/quasarframework/app-extension-dotenv or, alternatively, another official app extension, but less opinionated than dotenv wrappers: https://github.com/quasarframework/app-extension-qenv

Related

Test execution is different between Github Actions and local

I'm testing my express.js API via importing the root app instance and using it through chai-http. The tests are run via mocha.
As the title say, when I run my tests via Github Actions the results are different than when they are run locally. On Github Actions, I get an automatic 503 error from express on any of the test requests or any type of request, while locally all tests run fine and pass. When the 503 is received the entire test runner hangs as well and doesn't exit until the MongoDB driver times out with an error.
Initially the test timed out so I added --timeout 15000 to bypass it, hopefully temporarily.
This is the general setup and imports done before the tests
import {server} from "../bld/server.js";
import {join} from "path";
import chai from "chai";
import chaiHttp from "chai-http";
import chaiAjv from "chai-json-schema-ajv";
chai.use(chaiHttp);
chai.use(chaiAjv);
const api = !!process.env.TEST_MANUAL
? (process.env.API_ADDRESS ?? "http://localhost") + ":" + (process.env.API_PORT ?? "8000")
: server;
console.log((typeof api == "string")
? `Using manually hosted server: "${api}"`
: "Using imported server instance");
const request = chai.request;
const expect = chai.expect;
And the first test looks like this
describe("verification flow", () => {
const actionUrl = "/" + join("action", "verify", "0");
var response;
describe("phase 0: getting verification code", () => {
it("should return a verification code", async () => {
const res = await request(api).post(actionUrl);
expect(res).to.have.status(201);
expect(res).to.have.json;
expect(res.body).to.have.property("verificationCode");
response = res.body;
});
// ....
});
// ...
});
There are no errors on imports, no errors on attaching the server to chai, and from what I can log no issues with file pathing either. At this point I'm lost to as what could be causing the issue and don't know where to look for the root of the problem.
More specific information below:
Dependencies: https://pastebin.com/tu3n9FkZ
Github Actions: https://pastebin.com/HEk5adWQ
No artifacts (dependencies, builds) have been cached according to logs
Thank you for your time and let me know if you need any more information

More than one test fails due to import after jest is torn down - Supertest Typescript and Express API

I am running into an issue where I am running multiple tests using supertest and jest. When there is only one test running then it works just fine but the second one throws the following error:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
I tested this with two very simple tests:
describe("Default API", () => {
describe("Default:", () => {
it("should create a user in the DB", (done) => {
request(app).get("/").expect(200, done);
});
it("should create a user in the DB", (done) => {
request(app).get("/").expect(200, done);
});
});
});
They are the same but the second one throws the error. If I run only the first one there is no issue. This must be a setup issue Does anyone have advice. In my index.ts where I have the main express code I export app as follows:
export default app;
This is at the bottom of the index.ts file.
I had the simular problem and toggle down the issue, in my case I want to use mysql2 to access mariadb. That Module try to autodetect the charset and do to try to lacy loading that encoding.
But I have not found a solution for that for now.

Cannot set breakpoint in .vue file with async method

I'm having issues debugging my Vue app in that stepping can skip lines or breakpoints cannot be set on a valid line.
I guess it's a sourcemap issue but not sure where to start digging. Likely one of Vue-loader, Webpack or Babel.
Tested with:
vue: 2.6.10
vue-cli 4.1.2
The issue can be reproduced as follows:
create new Vue project:
vue create test
Just use the defaults
cd test
npm run serve
Replace HelloWorld.vue with:
<template>
<button #click="save()">
Save
</button>
</template>
<script>
export default {
methods: {
async save() {
debugger;
let valid = false;
if (valid) {
return;
} else {
console.log("Hi")
}
}
}
}
</script>
Open devtools in Chrome, hit the save button and try put breakpoint on the line:
if (valid) {
In my test the breakpoint isn't set.
If I remove async from the save method, the breakpoint can be set.
tested with Chrome 79 and Firefox 73.
I've also played around with various devtool settings in vue.config.js without success eg:
devtool = 'cheap-module-eval-sourcemap'
devtool = 'cheap-eval-source-map'
devtool = 'source-map'
Any ideas?
Kind regards
Bob
No idea why it does not work in this specific case, but as a means of last resort, you can add a line debugger; before if... - is will make any DevTools (at least any current one, incl. IE11) stop there. You code would then look something like this:
// ...
debugger;
if (valid) {
// ...
This is likely because of the Babel polyfills Vue CLI is configured to use by default which generated source maps don't seem to work well with.
Specifically this polyfill for async methods will cause issues with debugging:
https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator
You can avoid these polyfills by adding this in your .browserslistrc
[development]
last 1 chrome version
last 1 firefox version
The #vue/babel-preset-app Babel preset automatically determines which polyfills to use based on which browsers you are targeting in .browserslistrc. So to disable the problematic polyfill we target only browsers that natively support async/await in development (eg: the latest versions of Chrome and Firefox).

How to be more verbose on tests?

I wanted to have more verbose output for each test step;
Any ideas on how could I best achieve this without adding console.log after each step ?
I tried to overload the t object as shown below but can't get to have it work more than one time in the output.
in mylib.js
exports.init = function(t) {
t.oTypeText = t.typeText;
t.typeText = function fn(selector, data, opts) {
console.log('typing text in '+selector+': '+data);
return t.oTypeText(selector, data, opts);
};
return;
};
in test.js
import { Selector } from 'testcafe';
const mylib = require('./mylib');
fixture("Getting Started")
.page("https://devexpress.github.io/testcafe/example");
test('My first test', async t => {
mylib.init(t);
await t.typeText('#developer-name', 'John Smith')
.selectText('#developer-name').pressKey('delete')
.typeText('#developer-name', 'new name')
.selectText('#developer-name').pressKey('delete')
.typeText('#developer-name', 'another name');
await t.click('#submit-button');
});
result is:
Using locally installed version of TestCafe.
Running tests in:
- Firefox 68.0.0 / Mac OS X 10.14.0
Getting Started
(node:62978) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
typing text in #developer-name: John Smith
✓ My first test
1 passed (4s)
TestCafe doesn't support this feature out of box. I've created suggestion for you use case - https://github.com/DevExpress/testcafe/issues/4001 in the TestCafe repository. We can use the way with action overriding right now, but theoretically it can broke some functionality.

Running Knex Migrations Between Mocha Tests

I was using Mocha to test my Nodejs app with a test database. In order to reset the DB before each test I had the following code, which worked perfectly:
process.env.NODE_ENV = 'test';
var knex = require('../db/knex');
describe("Add Item", function() {
beforeEach(function(done) {
knex.migrate.rollback()
.then(function() {
knex.migrate.latest()
.then(function() {
return knex.seed.run()
.then(function() {
done();
});
});
});
});
...
I've since switched from mocha to mocha-casperjs for my integration tests, and now the knex migrations won't run. I'm given this error message with the exact same before each hook:
undefined is not an object (evaluating 'knex.migrate.rollback')
phantomjs://platform/new-item.js:12:17
value#phantomjs://platform/mocha-casperjs.js:114:20
callFnAsync#phantomjs://platform/mocha.js:4314:12
run#phantomjs://platform/mocha.js:4266:18
next#phantomjs://platform/mocha.js:4630:13
phantomjs://platform/mocha.js:4652:9
timeslice#phantomjs://platform/mocha.js:12620:27
I'm pretty sure that migration functionality is not included in webpack build. If you go to http://knexjs.org/ open up debug console and checkout different clients e.g. mysql.migrate you see that there are no functions declared at all.
Actually you can check it out with node too if you explicitly load webpack build instead of node lib.
// load webpack build instead of node build...
let knex = require('knex/build/knex')({client : 'pg'});
console.log(knex.migrate);
// outputs: {}
So... the question is why are you trying to run your tests on PhantomJS browser instead of node.js?