Next.js에서 Vitest를 사용하여 테스트를 할 때 env 파일의 설정을 읽습니다

아직 보도할 정도는 아닌 것 같은데, 뇌사가 조사되지 않았기 때문에 먼저 적어놨어요.
이번 테스트services/foo.ts의 함수.
다음은 폴더 구성입니다.
먼저 설치
.
├──pages
├── vite.config.ts
├── next.config.js
├── next-env.d.ts
├── test
│  └── setup.ts 
├── node_modules
├── srvices
│  └── foo.ts 
├── package.json
├── yarn.lock
└── tsconfig.json
를 하십시오.
yarn add -D vitest
그리고 getEnv의script에 vitest의 실행 스크립트를 추가하십시오.
package.json
...
  "scripts": {
  ...
    "test": "yarn vitest"
  },
  ...
다음은 package.json에서 기술vitest의 설정이다.vite.config.ts 폴더 내의 vite 파일을 테스트합니다.services 테스트 시 js, ts의 파일을 환경 변수로 읽기 때문에 이 파일을 읽기 위한 설정을 합니다.
vite.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  define: {
    'import.meta.vitest': false,
  },
  test: {
    includeSource: ['services/**/*.{js,ts}'],
    setupFiles: ['test/setup.ts'],
  },
})
test/setup.ts 파일 내에서 이것은 직접 복사한 것이다Next.뉴스..
test/setup.ts
import { loadEnvConfig } from '@next/env'
loadEnvConfig(process.cwd())
이번에 읽은 환경 변수 값과next입니다.js에 있는 설정입니다.
.env.test.local
TEST_ENV=test_env
next.config.js
module.exports = {
  reactStrictMode: true,
  pageExtensions: ['jsx', 'js', 'ts', 'tsx'],
  build: {
    env: {
      TEST_ENV: process.env.TEST_ENV,
    },
  },
  env: {
    TEST_ENV: process.env.TEST_ENV,
  }
}

이번 테스트의 함수와 테스트 코드.
환경 변수.env.test.local를 읽고 반환하는 함수일 뿐입니다.setup.ts 실행된 함수의 반환 값이 특정 값과 일치하는지 확인합니다.
services/foo.ts
export const getEnv = () => {
  return process.env.TEST_ENV
}

if (import.meta.vitest) {
  const { test, expect } = import.meta.vitest
    test("getEnv's results is test_env", () => {
      expect(getEnv()).toBe('test_env')
    })
}
다음 명령을 실행하면 테스트를 실행합니다.
녹색은 PASS의 문자가 바로 시험에 합격했다는 것을 나타낸다.
yarn test
처음에도 썼는데 아마 기사에 쓸 필요가 없을 것 같은데 어려운 사람이 있으면 참고만 썼어요.
끝까지 읽어주셔서 감사합니다.만약 나를 도와 버튼을 좀 눌러 줄 수 있다면 나는 매우 기쁠 것이다.
Thank you!

참고 문헌

  • https://vitest.dev/config/#setupfiles
  • https://nextjs.org/docs/basic-features/environment-variables#test-environment-variables
  • 좋은 웹페이지 즐겨찾기