Getting TestCafe to recognize dotenv variables

Question

I might be mixing up concepts, but I'd read that it's possible to get TestCafe to recognize variables of the form process.env.MY_COOL_VARIABLE. Also for my Vue.js frontend (built using Vue-CLI, which uses dotenv under the hood), I found I could make a file in .env.test for test values like so:

VUE_APP_MY_COOL_VARIABLE

which I would then access in my test code like so:

test('my fixture', async (t) => {
 ...
 await t
      .click(mySelector.find('.div').withText(process.env.VUE_APP_MY_COOL_VARIABLE));
 ...

}

However, I get the following error:

"text" argument is expected to be a string or a regular expression, but it was undefined.

Seems like my environment variables aren't getting picked up. I build my code like so: vue-cli-service build --mode test.

score 4 · Answer 1 · answered Oct 04 '19 at 12:14

TestCafe doesn't provide support for .env files out of the box. You can create a test file that will require the dotenv module and load your configuration file:

// enable-dotenv.test.js
require('dotenv').config({ path: '.my.env' });

testcafe chrome enable-dotenv.test.js tests/

score 2 · Accepted Answer · answered Oct 06 '19 at 00:08

Here's how I solved my issue. When debugging, I did a console.log of process.env and noticed that the variable that vue recognizes wasn't visible during testcafe's run. From our package.json:

"test:ui:run": "VUE_APP_MY_COOL_VARIABLE=ui-test yarn build:test && testcafe -a ../ui-test-server.sh chrome",

Also this bit of javascript is run by both the test and mainline code, so I had to use a conditional.

import * as dotenv from 'dotenv';

if (process.env.npm_package_scripts_test_ui_run) { // are we running a testcafe script
  dotenv.config({ path: '.env.test' });
}

Matt · Answer 3 · 2019-10-03T15:17:44.870

-1

Have you tried process.env[VUE_APP_MY_COOL_VARIABLE]? It's worth noting that everything in dotenv comes back as a string so you may need to do the casting yourself. For example:

function getEnvVariableValue(envVariable: string) {
    // Cast to boolean
    if (envVariableValue.toUpperCase() === "TRUE") {
        return true;
    } else if (envVariableValue.toUpperCase() === "FALSE") {
        return false;
        // Cast to number
    } else if (!isNaN(Number(envVariableValue))) {
        return Number(envVariableValue);
    } else {
        return envVariableValue;
    }
}

You can also try creating a .env file in the root folder to see if it picks it that way. I use dotenv in my project directly by including it in the package.json as a dependency and it works this way.

edited Oct 03 '19 at 15:17

answered Oct 03 '19 at 15:00

Matt

225
2
3
7

I'm only including strings in my variables. I've tried adding dotenv to package.json but that didn't seem to take. – Ann Kilzer Oct 03 '19 at 16:28
Here's what mine looks like: "dependencies": { "@types/dotenv": "^6.1.1", "@types/node": "^11.11.3", "dotenv": "^8.0.0" } I've tested it by both adding to the .env file and setting the environment directly. – Matt Oct 03 '19 at 16:32
Okay, but I'm not using .env, I am using .env.test because it's important to have these values only injected in my test environment. – Ann Kilzer Oct 03 '19 at 16:43
1

By default dotenv looks for a .env file, if you need to change that you'll need to specify the file directly: dotenv.config({ path: envFile }) – Matt Oct 03 '19 at 16:53
1

It's worth noting that dotenv discourages the pattern of having a separate test files though: https://github.com/motdotla/dotenv#should-i-have-multiple-env-files – Matt Oct 03 '19 at 17:00
I noticed that, but it’s a decision made and supported by the vue-cli team. – Ann Kilzer Oct 03 '19 at 23:53

Getting TestCafe to recognize dotenv variables

3 Answers3