#jest

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

프론트엔드 테스트코드 어떻게 하세요?

안녕하세요. 2년차 프론트엔드로 일하고 있는 주니어입니다. 사내에 테스트코드 도입 전 혼자 해보고있는데요, tdd를 하고 계시는 다른 현직자 분들에게 궁금한점이 있습니다. 유닛 테스트 : jest, vitest E2E 테스트: cypress, playwright 위의 도구로 이것저것 해보고있는데 하면서 까다로운 점이 있습니다. 일반 유틸 함수 같은 것은 유닛테스트가 비교적 간단하지만 프론트 엔드이다 보니 컴포넌트 테스트를 하려면 무조건 DOM 으로 불러와야하고, 사이즈가 큰 컴포넌트는 뭔가 잘 되지도 않고, 이럴거면 그냥 E2E만으로 하면 되지 않나 라는 생각도 들고... 실제로는 unit 테스트 도구로 컴포넌트 dom으로 불러와서하고 e2e도 따로 하시나요? 아니면 e2e로만, unit으로만 이렇게 한가지로만 하시나요??

Next.js TDD 어떻게 하고 계신가요?

안녕하세요! 전 직장까지는 AI 서비스기획/개발을 주로 하였으나, 현재 이직 후에는 Next.js를 활용한 프론트를 주로 개발하고 있는데요..! 그러다보니 Next.js(+TypeScript) 프론트 작업시, TDD 트렌드에 대해 잘 몰라 질문드리고자 이렇게 투표를 만들어보게 됐습니다. :D 각 회사/본인의 팀에서는 TDD를 어떻게 적용하고 계신지(Unit Test / 통합테스트) 감사하겠습니다.🙏 의견으로 상세히 설명해주시면 더더더더 감사합니다.😇 npm trends를 조회해보기도 했지만, 이미 시장 장악력의 의한 수치이거나 이미 CRA시 자동으로 들어가 있는 Jest와 같이 사용하지도 않는데 다운만되는 경우가 모두 포함된 경우라고 생각하니 진정한 의미에서의 Trend라고는 생각이 안되더라구요. 커리어리를 통해 함께 TDD Trends를 알아갈 수 있도록 함께해주시면 정말정말 감사하겠습니다 :)! 중복 투표 기능도 없고, 5개 이상 보기를 만들 수 없어서 ㅠㅜ 투표 기능이 참 아쉽습니다만.. 그래도 한 번 의견 주시면 감사하겠습니다! (커리어리 개발자님들 투표기능 업그레이드 부탁드려요!)

react 테스트 코드 작성할 때 어떤 걸 사용하나요?

안녕하세요 프엔 신입입니다! 태스트코드를 적용시켜보려고 합니다. 찾아보니 jest가 제일 유명한 것 같은데 저희는 react, ts, vite를 사용하고 있습니다. cra의 경우 jest를 많이 쓰는 것 같은데 vite 환경이여도 상관 없는지 궁금합니다ㅠ vue 공식에서는 vitest라는 것을 사용하라고 하는데 정확히 무슨차이인지 와닿지 않아서ㅠ

테스트 코드 모듈 관리는 어떻게 하는게 효율적일까요?

jest 를 사용해 Next 프레임워크에서 테스트 코드를 작성하였는데 테스크 코드에 대한 모듈을 어떤식으로 관리하는게 좋을까요? test 폴더에 모든 test 코드를 관리하자니, 모듈이 많아지게 되었을때 어떤 테스트 코드가 어떤 파일에 해당하는 테스크 코드인지 확인 하기 어렵고 각 모듈이 있는 경로에 test 코드를 각각 관리하자니 모듈을 새로 생성할때마다 똑같은 이름의 테스크 코드 모듈이 생성 되서 어떤 방법이 더 관리하기 편할지 의문입니다 어떤 모듈 관리가 더 효율적일까요? 개인적으로는 후자가 더 편할거같기는 한데 이것이 개인적인 선호도의 차이일까요??

jest의 expect 를 사용해서 함수가 제대로 콜 되었는지 확인하는 방법이 궁금합니다

jest로 expect(xxx) 해서 함수가 제대로 콜 됐는지 확인하고 싶은데요! .toXXX를 확인해보면 전부 mock function에 대해서만 하는것 같더라고요. 혹시 실제 로직도 체크하는 방법이 있을까요?

jest환경에서의 export * from './*' 이슈

안녕하세요 react native로 테스트코드를 짜다가 막힌 개발자입니다 저는 주로 hooks라는 폴더가 있으면 그 안에 index.ts를 만들어서 이와 같은 레이어의 폴더,파일들을 전부 export * from './*' 하여 실제로 사용할때 import { someHook } from 'hooks' 이렇게 사용하고 있었습니다. 구현 및 동작에는 오랫동안 이슈가 없었지만 이번에 유닛테스트를 도입하면서 jest가 'hooks'라는 놈을 import하는 파일을 테스트할 시 그 안에 모든 파일들을 읽어서 테스트실패가 아닌 jest에러를 계속 만나고 있습니다.. 노가다 mocking을 하여 어느정도 막았지만 테스트할 파일이 아닌 파일에서 계속 에러가 등장해서 babel과 jest의 config를 계속 수정해봤지만 해결이 되지않아 이렇게 자문을 구합니다. 추가로 웹에서도 이러한 export * 을 사용한 index.ts패턴을 사용할 때 성능 등의 이슈가 없는지 궁금합니다!

테스트 코드 파일의 적절한 위치

안녕하세요 jest로 프론트엔드 컴포넌트 단위 테스트를 작성하고 있습니다. 초기 세팅에서는 __test__ 디렉토리를 생성하여 안에다가 테스트 파일을 몰아줬는데, 파일을 계속 만들다 보니까 컴포넌트 파일과 같은 디렉토리에 넣으면 더 쉽게 찾을 수 있지 않을까 하는데 생각이 드는데 여러분들 생각엔 어떤게 더 좋아보이시나요?

API CI/CD에 올릴 때 관련 질문!!

API 올리실 때도 주소마다 jest로 테스트 만들어서 올리시나용??

React 프로젝트에 테스트 도입

안녕하세요. 회사 React 프로젝트에 테스팅을 도입하고 싶은데 어떻게 시작하면 좋을지 조언을 구하고 싶습니다. 아직 테스트 코드는 없고 제가 동료들을 설득한 뒤 도입해야 합니다. 페이지가 50개 이상되는 프로젝트라서 규모가 꽤 있습니다. 우선 Jest나 react-testing-library부터 시작해보려고 하는데 프론트엔드 테스트는 검색해도 자료가 별로 없고 생각보다 큰 프로젝트에 적용하는건 처음이라 관련 경험을 해보신 선배님들의 다양한 의견을 듣고 싶습니다. - 프론트엔드 테스트를 도입해야 하는이유 (동료 설득) - 큰 프로젝트에서 처음 시도해보면 좋을 테스팅 관련 액션 아이템 등등 조언 부탁드립니다. 감사합니다!

react, typescript에서 테스트코드를 작성하고 싶은데 뭘 쓰면 좋을까요? 선배님들 도와주세요...

안녕하세요 저는 프론트엔드 개발자 취업준비생입니다. 취업준비와 병행하며 포트폴리오용 웹사이트 제작하고 싶어서 팀에 합류했는데요! 프론트는 react와 typescript를 사용하는 게 확정이 됐고, 저 포함 프론트 팀원 3명 다 테스트코드 작성 경험이 없어서 이번에 도입해보려고 합니다. Q. 구글링을 해보니 가장 많이 나오는게 jest인 것 같은데 어떤 걸로 하는걸 추천하시나요?

Jest의 describe와 it은 무슨 차이인가요?

Jest를 이용해서 React 테스트를 하려고 알아보고 있는데 describe와 it을 사용해서 케이스를 나누는 것 같아 보입니다. it이 더 작은 단위인 것은 알겠는데 describe를 여러 개 중첩해서 사용하기도 해서 정확히 언제 describe를 사용하고 언제 it을 사용해야 하는지 잘 모르겠습니다.