-1

Olá tenho tenho um arquivo de constantes definido assim em um projeto React:

src/constants/env.ts

export default {
   PROD: ['prod', 'production'].includes((process.env.NODE_ENV || '').toLowerCase())
}

Esse arquivo é usado pra definir algumas configurações como no exemplo abaixo:

src/utils/storage/Storage.ts

import ENV from 'src/constants/env'

class Storage {
  async get<T = any>(key: string): Promise<T | undefined> {
    return await new Promise((resolve) => {
      try {
        let value = localStorage.getItem(key) as string
        if (value) {
          if (ENV.PROD) value = btoa(value)
          resolve(JSON.parse(value) as any as T)
        }
      } catch (error) { }
      resolve(undefined)
    })
  }

  async set(key: any, value: any): Promise<void> {
    return await new Promise((resolve) => {
      try {
        value = JSON.stringify(value)
        if (ENV.PROD) value = atob(value)
        localStorage.setItem(key, value)
      } catch (error) {
        console.log(error.message)
      }
      resolve()
    })
  }
}

export default new Storage()

E estou tentando mockar o valor de PROD como true para que a classe Storage leia o ENV como true e então salve os dados em base64.

src/utils/storage/Storage.test.ts

import Storage from './Storage'
import ENV from 'src/constants/env'

describe('Storage', () => {
  const key = 'test'
  const value = { test: 'test' }

  const { PROD } = ENV

  beforeEach(() => {
    localStorage.clear()
    ENV.PROD = false
  })

  afterAll(() => ENV.PROD = PROD)

  describe('set', () => {
    test('should set encoded base64 data if prod mode', async () => {
      ENV.PROD = true
      await Storage.set(key, value)
      expect(localStorage.getItem(key)).toEqual(atob(JSON.stringify(value)))
    })
  })
})

Mas não estou conseguindo fazer com que a classe Storage leia o valor de PROD como true. O que é necessário para fazer o mock deste arquivo de constantes? Alguém pode me ajudar?

2

1 Resposta 1

0

Conforme sugeri nos comentários, você pode optar por utilizar os manual mocks.

Utilizando manual mocks

Basicamente, você poderia criar, dentro do diretório do recurso que você está importando, um outro diretório chamado __mocks__, onde você cria um arquivo de mesmo nome daquele que você está importando.

Vamos tentar entender através de um exemplo:

.
├── babel.config.js
├── jest.config.js
├── package-lock.json
├── package.json
├── src
│   ├── __tests__
│   │   └── util.js
│   ├── constants
│   │   ├── __mocks__
│   │   └── env.js
│   ├── index.js
│   └── util.js
└── webpack.config.js

Onde src/index.js corresponde a:

import { getAppEnvironment } from './util';

(function() {
  console.log(getAppEnvironment());
})();

src/util.js corresponde a:

import ENV from './constants/env';

export function getAppEnvironment() {
  return ENV.PRODUCTION ? 'Production' : 'Development';
}

E src/constants/env.js:

export default {
  PRODUCTION: ["prod", "production"].includes((process.env.NODE_ENV || '').toLowerCase())
}

Da mesma forma que no seu caso.


Então, quando vou fazer o teste em src/__tests__/util.js, eu faço:

jest.mock('../constants/env');

const { getAppEnvironment } = require("../util");

describe("Testing the consistency of the environment teller", () => {
  it("should return 'Production' when it's on production", () => {
    require('../constants/env').__setEnvironmentData('PRODUCTION', true);

    let environment = getAppEnvironment();

    expect(environment).toBe('Production');
  });

  it("should return 'Development' when it's on development", () => {
    require('../constants/env').__setEnvironmentData('PRODUCTION', false);

    let environment = getAppEnvironment();

    expect(environment).toBe('Development');
  })
});

Note que, antes de importar a função getAppEnvironment, e isso principalmente se eu estivesse utilizando um import, eu utilizo o método jest.mock, para que o módulo constants/env a ser importado, seja o módulo mockado (contido em constants/__mocks__), e não o módulo original.

Mas, mesmo se você não fizer o mocking antes da importação, de acordo com a documentação, o próprio Jest cuidará de fazê-lo.


Aí, pode-se pensar: espera, que coisa estranha é aquela?

    require('../constants/env').__setEnvironmentData('PRODUCTION', true);

Isso é uma função, presente no módulo mockado, que estaremos utilizando para alterar o valor da "constante" PRODUCTION para aquilo que quisermos. E aqui está o código do módulo mockado:

const data = { PRODUCTION: false };

export function __setEnvironmentData(key, value) {
  data[key] = value;
}

export default data;

Onde eu, simplesmente, atribuo um objeto a data, que corresponderá ao objeto que seria retornado pelo módulo original, e defino a função __setEnvironmentData, que, conforme dito antes, será a responsável por modificar o valor da "constante".

Com isso tudo, podemos perceber que o responsável por importar o módulo constants/env (claro, durante os testes) será o próprio Jest, pois, será ele o responsável por trocar o módulo original pelo mock, esse o qual permitirá a troca do valor da "constante".

Executando os testes

Vamos executar os testes:

device:481942 gustavosampaio$ npm test

> [email protected] test /path/to/SO/481942
> jest

 PASS  src/__tests__/util.js
  Testing the consistency of the environment teller
    ✓ should return 'Production' when it's on production (1 ms)
    ✓ should return 'Development' when it's on development

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.009 s
Ran all test suites.
device:481942 gustavosampaio$ 

Conseguimos fazer o mock do módulo!

E se quiser atestar que realmente é isso, tente comentar o jest.mock e depois as chamadas da função __setEnvironmentData. :)


Lembrando que, no meu caso, só foi possível utilizar a sintaxe import do ES, através do Webpack e do Babel! ;)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .