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.jsmodule.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!
참고 문헌
Reference
이 문제에 관하여(Next.js에서 Vitest를 사용하여 테스트를 할 때 env 파일의 설정을 읽습니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/tabigaeru/articles/8a473117a4d439텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)