Jest, storybook에서 .env 환경 변수 설정하기

Jest에서 .env 환경 변수 설정하기

저희는 Jest에서 msw를 통해 fetch를 하고 코드가 제대로 돌아가는 지 확인하고 있습니다

api 코드

const BASE_URL = process.env.VOTOGETHER_BASE_URL;

export const getUserCategoryList = async () => {
  const categoryList = await getFetch<CategoryResponse[]>(`${BASE_URL}/categories`);

  return transformCategoryListResponse(categoryList);
};

jest 코드

import { MOCK_CATEGORY_LIST, MOCK_GUEST_CATEGORY_LIST } from '@mocks/mockData/categoryList';

describe('카테고리에 대한 통신(카테고리 목록 조회, 즐겨찾기 추가, 제거)이 올바르게 작동하는 지 확인한다.', () => {
  test('회원의 카테고리 정보를 불러올 수 있다.', async () => {
    const data = await getUserCategoryList();

    const expectResult = transformCategoryListResponse(MOCK_CATEGORY_LIST);

    expect(data).toEqual(expectResult);
  });

하지만 api 코드에 const BASE_URL = process.env.VOTOGETHER_BASE_URL;와 같이 .env의 환경변수를 사용하게 되어서 테스트에 실패했습니다.

따라서 Jest에 환경설정을 해주어야 했어요

.env.test 파일, jest.config.js 파일, jest.setup.js 파일에 설정을 해주고 jest의 테스트를 통과할 수 있었습니다.

.env.test

VOTOGETHER_BASE_URL=''
VOTOGETHER_MOCKING_URL=''

jest.config.js

module.exports = {
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@assets/(.*)$': '<rootDir>/src/assets/$1',
    '^@pages/(.*)$': '<rootDir>/src/pages/$1',
    '^@components/(.*)$': '<rootDir>/src/components/$1',
    '^@styles/(.*)$': '<rootDir>/src/styles/$1',
    '^@api/(.*)$': '<rootDir>/src/api/$1',
    '^@type/(.*)$': '<rootDir>/src/types/$1',
    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
    '^@constants/(.*)$': '<rootDir>/src/constants/$1',
    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
    '^@mocks/(.*)$': '<rootDir>/src/mocks/$1',
  },
  setupFilesAfterEnv: ['./jest.setup.js'], // << 이 부분이 중요
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
};

jest.setup.js

import 'whatwg-fetch';

import dotenv from 'dotenv'; // << 이 부분이 중요
import { setupServer } from 'msw/node';

import { handlers } from './src/mocks/handlers';

dotenv.config({ path: './.env.test' }); // << 이 부분이 중요

export const server = setupServer(...handlers);

beforeAll(() => {
  server.listen();
});

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

Storybook에서 .env 환경 변수 설정하기

저희는 스토리북에서 MSW와 함께 데이터를 사용하고 있습니다.

이번에도 const BASE_URL = process.env.VOTOGETHER_BASE_URL;와 같은 코드가 있어서 스토리북에서 오류가 났습니다.

설정 방법은 아래와 같습니다 env를 설정하는 곳에서 사용하는 환경 변수를 직접 적어주어 해결했습니다.

.storybook/main.ts

import path from 'path';
import type { StorybookConfig } from '@storybook/react-webpack5';

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: async config => {
    if (!config.resolve) {
      config.resolve = {};
    }

    if (!config.resolve.plugins) {
      config.resolve.plugins = [];
    }

    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      })
    );
    return config;
  },
  staticDirs: ['./public'],
  // ********  << 지금부터
  env: config => ({
    ...config,
    VOTOGETHER_BASE_URL: '',
    VOTOGETHER_MOCKING_URL: '',
  }),
  // ********  << 여기까지!
};
export default config;