Help with .quasar.env.json in Jest

rafaelst2000

Hello, i have some env variables in the .quasar.env.json, its working on the project but when I try to acess it running the test its not. Please help me, i am noob configuring project and stuff

beatscribe

I’d try to help but I need a little more info. What is the variable you are trying to add and how are you trying to use it in a test?

beatscribe

This post is deleted!

rafaelst2000

I’m have

{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "development",
    "BASE_URL": "http://localhost:3000/v1",

and a function is calling process.env.BASE_URL and it’s not working in the test

rafaelst2000

the error

  headers: {
            Accept: 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
            'api-key': undefined,
            accept: 'application/json'
          },
          method: 'post',
          baseURL: undefined,
          url: '/auth/account',

beatscribe

Ah…You are trying to do environment variables.

You need this extension: https://www.npmjs.com/package/@quasar/quasar-app-extension-qenv

You’ll make a separate .quasar.env.json.

rafaelst2000

I already have this, and i have test enviroment, but can’t acess this in jest

dobbel

@rafaelst2000

Better perhaps to ask these questions at the Quasar Test Extension github page:

https://github.com/quasarframework/quasar-testing

beatscribe

Its not ideal, but you can do it like this:

In jest.config.js:

module.exports = {
  setupFiles: ['<rootDir>/test/jest/setEnvVars.js'],

In the setEnvVars.js:

process.env.ENV_DEV= 'development';
process.env.ENV_TYPE = "Running Development";
process.env.BASE_URL = 'http://localhost:3000/v1',

In my vue file:

  data() {
    return {
      envVar: '',
    };
  },
  mounted() {
    this.envVar = process.env.ENV_DEV;
  },

In my test spec:

expect(wrapper.vm.envVar).toBe('development');

I would like to know the answer to this too, as I expect I will need it as I move thru my environments as well. It seems there must be a way to set it from the command line when you run the test.

rafaelst2000

@beatscribe i can’t do this because it’s a function in util.js calling the env, not the component

rafaelst2000

@dobbel i don’t think is a good idea because this is from my work, i need it as soon as possible and the last reply on the github was earlier last month

beatscribe

@rafaelst2000 I get you. Ideally you want to be able to do something like

npm run jest ENV=development

And have them be set as they would when you run quasar dev or quasar build? That’s what I’m looking for.

beatscribe

@rafaelst2000 @dobbel That github link’s default text when you open an issue actually says to come here too

rafaelst2000

@beatscribe yes, thats is
i have

cross-env QENV=test quasar test --unit jest

but doest work the enviroment

rafaelst2000

As i can’t catch the enviroment, i can’t acess the API base URL

beatscribe

I have found several possible solutions but none of them address the problem of how do you call it from the command line. This is the closest:
https://medium.com/@nickcis/jest-passing-custom-arguments-d44ef3f2defb

The fact that it’s not made to work this way is making me ask though, should I ever need environment variables in unit tests? My environment variables are mostly API urls and stuff like that, do I ever need those in a unit test? Wouldn’t i just be mocking the results mostly?

beatscribe

So I came up with something. It might not be ideal for what you want @rafaelst2000 , but since mine eventually goes into Docker, its perfect for my needs.

I didnt use Qenv or Dotenv, just this basically: https://quasar.dev/quasar-cli/handling-process-env

quasar.conf.js

    build: {
      env: {
        BACKEND_API: process.env.BACKEND_API,
        API_PASSWORD: process.env.API_PASSWORD
      },

In my Jest MainLayout.spec.js (or any jest spec really)

describe('Environment Variables', () => {
  test('can be read', () => {
    expect(process.env.BACKEND_API).toBe('dev.fake_api.com');
  });
});

Running the unit tests:

BACKEND_API=dev.fake_api.com API_PASSWORD=2many$ecrets npm run unit:test

Results:

> providerfrontend@0.0.1 test:unit
> jest --updateSnapshot

 PASS  test/jest/__tests__/layouts/MainLayout.spec.js
  MainLayout
    ✓ mounts without errors (39 ms)
  Environment Variables
    ✓ can be read (1 ms)

  console.log
    Environment: myapi.com

      at src/layouts/MainLayout.vue:15:1

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.769 s
Ran all test suites.

Works the same as qenv in running and building.

No More Posting New Topics!

Help with .quasar.env.json in Jest