안녕하세요 강의 잘 듣고 있습니다수강하면서 실습을 위해 올려주신 깃헙을 클론해서 각종 라이브러리 설치 후 실행하는데 jest-dom라이브러리를 인식을 못하는 건지 계속 다음 부분에서 오류가 나서 테스트가 실패하네요 클론 후 코드 수정 등은 한 것이 없는데 무엇이 문제일까요?

강의 듣다 교안도 함께 보고싶어서 문의 드려요~

안녕하세요현재 vue3로 구현된 프로젝트 내로그인 성공 시 utils.js의 method3이 호출되는지 테스트를 하려고합니다method3을 모킹함수로 대체하였는데로그인 로직 내 method3을 콘솔로 찍어보면 undefined이 나와서 질문드립니다.왜 method3이 undefined 가 나오는지 알려주실 수 있으실까요? 아래는 테스트 하기 위한 과정입니다.1. 로그인 로직 중 utils.js의 method3을 호출하는 코드 존재util.jsexport const method1 = () => { ... } export const method2 = () => { ... } export const method3 = () => { ... }2. method3을 모킹 함수로 대체하려고 함3. utils.js 파일이 위치하는 곳에 mocks 폴더를 만들어 아래와 같이 코드 작성export default { ...jest.requireActual('../util'), method3: jest.fn() }4. 로그인 테스트 파일을 아래와 같이 작성login.spec.js(테스트할 파일)jest.mock('../common/util.js') import { setActivePinia, createPinia } from 'pinia' import * as fns from '../../common/util' import { login } from '../../api/loginApi' import { loginUser } from '../../store/authStore' describe('로그인', ()=>{ // userStore 내 loginUser 함수를 호출하기 위한 셋팅 let userStore beforeEach(()=>{ setActivePinia(createPinia()) userStore = useAuthStore() }) test('로그인 성공 시 성공 메시지 출력', async () => { // 로그인 성공 시 로그인한 사용자 정보 반환 const mockResponse = { status : 200, data: { data: { userName: 'test1' } } } // 로그인 요청 api를 모킹함수로 대체 await login.mockResovedValue(mockResponse) // loginUser는 로그인 성공 시 유저 정보를 상태관리 변수에 저장 await userStore.loginUser({userId : 'test1', password : 'test1pw'}) expect(fns.method3).toHaveBeenCalled() }) }) 5. expect 부분에서 아래와 같이 오류 메시지가 발생합니다expect(received).toHaveBeenCalledWith(...expected) Matcher error: received value must be a mock or spy function Received has value: undefined 

호출 순서 테스트, Mock 객체, jest-extended 강의 내용에서 나온 jest-extended를 사용해보고 있는데요. 테스트가 실패하진 않지만 IDE에서 타입 에러가 나면서 자동완성이 되고 있지 않은 상황입니다 ㅠㅠ 시도해본 IDE 환경은 VSCode, Webstorm 이고 둘다 에러가 나고 있습니다.해당 이슈 겪어보신 분 계실까요? // global.d.ts import "jest-extended"; // tsconfig.json { "files": ["global.d.ts"] }// testSetup.js const matchers = require("jest-extended"); expect.extend(matchers);// jest.config.js /** @type {import('ts-jest').JestConfigWithTsJest} **/ export default { testEnvironment: "node", transform: { "^.+.tsx?$": ["ts-jest", {}], }, setupFilesAfterEnv: ["./testSetup.js"], };에러나는 테스트코드 파일:test("first > second > third (jest extended)", () => { const spy1 = jest.fn(first); const spy2 = jest.fn(second); const spy3 = jest.fn(third); spy1(); spy2(); spy3(); expect(spy1.mock.invocationCallOrder[0]).toBeLessThan( spy2.mock.invocationCallOrder[0] ); // toHaveBeenCalledBefore 함수를 타입스크립트 컴파일러가 인식하지 못함 expect(spy1).toHaveBeenCalledBefore(spy2); expect(spy3).toHaveBeenCalledAfter(spy2); }); jest의 matchers 는 인식하지만, jest-extended 의 matchers 들은 인식하지 못하는 상태입니다.(+그런데 한 가지 특이한 건, vscode 기준으로 testSetup.js 파일을 같이 띄워놓으면 타입 에러가 사라집니다...)

Test suite failed to run ReferenceError: TextEncoder is not defined 1 | 2 | import "@testing-library/jest-dom"; > 3 | import * as nock from "nock"; | ^ 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 | import { 6 | fireEvent, at Object.<anonymous> (node_modules/@mswjs/interceptors/src/utils/bufferUtils.ts:1:17) at Object.<anonymous> (node_modules/@mswjs/interceptors/lib/browser/index.js:4:24) at Object.<anonymous> (node_modules/nock/lib/intercept.js:13:30) at Object.<anonymous> (node_modules/nock/lib/recorder.js:8:44) at Object.<anonymous> (node_modules/nock/lib/back.js:4:18) at Object.<anonymous> (node_modules/nock/index.js:3:14) at Object.<anonymous> (src/__test__/Login.spec.tsx:3:1) ReferenceError: TextEncoder is not defined에러가 발생합니다.node -v => v18.18.2노드 버전이랑, util 라이브러리를 사용해 문제를 해결하려 했지만, 잘 되지 않아 질문드립니다.

클래스를 모킹할 때도 jest.mock을 사용하나요? 아니면 다른 방법이 있나요?

package.json{ "name": "jest-lecture", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "@types/jest": "^29.5.14", "jest": "^29.7.0", "jest-extended": "^4.0.2", "ts-jest": "^29.2.5" } }global.d.tsimport "jest-extended";tsconfig.json{ "files": ["global.d.ts"] }jest.config.js/** @type {import('ts-jest').JestConfigWithTsJest} **/ module.exports = { testEnvironment: "node", transform: { "^.+.tsx?$": ["ts-jest", {}], }, setupFilesAfterEnv: ["./testSetup.js"], };testSetup.jsconst matchers = require("jest-extended"); expect.extend(matchers);위의 환경에서 설정하였으며src/order.test.ts에서import { first, second, third } from "./order"; test("first->second->third", () => { const spy1 = jest.fn(first); const spy2 = jest.fn(second); const spy3 = jest.fn(third); spy1(); spy2(); spy3(); console.log(spy1.mock.invocationCallOrder[0]); console.log(spy2.mock.invocationCallOrder[0]); console.log(spy3.mock.invocationCallOrder[0]); // expect(spy1.mock.invocationCallOrder[0]).toBeLessThan( // spy2.mock.invocationCallOrder[0] // ); // expect(spy3.mock.invocationCallOrder[0]).toBeGreaterThan( // spy2.mock.invocationCallOrder[0] // ); expect(spy1).toHaveBeenCalledBefore(spy2); expect(spy3).toHaveBeenCalledAfter(spy2); });위처럼 테스트를 실행하면 ● first->second->third TypeError: expect(...).toHaveBeenCalledBefore is not a function 19 | // spy2.mock.invocationCallOrder[0] 20 | // ); > 21 | expect(spy1).toHaveBeenCalledBefore(spy2); | ^ 22 | expect(spy3).toHaveBeenCalledAfter(spy2); 23 | }); 24 | at Object.<anonymous> (src/order.test.ts:21:16)위와 같은 타입오류가 나오고있는데요,무엇때문에 오류가 나는지 모르겠습니다ㅠㅠ

안녕하세요. 테스트 코드에 관심이 있는 중에 찰떡인 강의 덕분에 집중해서 강의를 정독하고있습니다. mocking 시에 여러 라이브러리들이 존재할텐데, nock 을 선택하신 이유가 궁금합니다. 추가로 다들 비슷하겠지만 라이브러리를 선택하실때 고민하시는 부분들이 어떤 부분들이 있는지 궁금해요. (저는 주로 github 스타,업데이트 및 지원, 사용성, 지금 코드와 적합한가? 정도 보긴합니다..)

https://github.com/ayden94/jestTestsrc/module.spec.ts에서 jest.mock('./module')를 하면, 모듈이 이상하게 모킹되는 듯합니다. 메소드가 존재는 하지만, 호출할 경우 완전히 말이 안 되는 결과를 리턴해서 toBe가 항상 틀린 것으로 결과가 나옵니다. 모듈 모킹 시도 없이 모듈 그 자체를 가지고 테스트를 해보면 문제가 없는데, 꼭 모듈을 모킹하면 문제가 생깁니다. 고민해봤지만 원인을 모르겠습니다.확인 부탁드립니다. 

toBe, not, jest익스텐션 강의 내 2:30 부분에서 설명주신 vsCode 내 Jest 설정 시 아래 세가지 옵션을 추가하라고 하셨는데,{ "jest.pathToJest": "**/node_modules/.bin/jest", "jest.pathToConfig": "**/jest.config.js", "jest.showCoverageOnLoad": true } pathToJest와 pathToConfig 옵션은 Unknown Configuration Setting, showCoverageOnLoad 옵션은 Deprecated: Please use jest.runMode instead.(2)라는 안내가 뜹니다. 이 부분 어떻게 적용해야할지 궁금합니다. 

비동기 함수 테스트 강의를 따라했을 때 제 컴파일러에서는 오류가 발생합니다. 다른 테스트 케이스들 말고 아래 두 케이스에서만요.test('okPromise 테스트', () => { const okSpy = jest.fn(okPromise); return okSpy.then((result) => { expect(result).toBe('ok'); }) }) test('noPromise 테스트', () => { const noSpy = jest.fn(noPromise); return noSpy.catch((result) => { expect(result).toBe('ok'); }) })각 테스트 별 에러 메세지는 다음과 같습니다.'Mock<Promise<string>, [], any>' 형식에 'then' 속성이 없습니다.ts(2339)'Mock<Promise<never>, [], any>' 형식에 'catch' 속성이 없습니다.ts(2339)코드를 동일하게 작성했음에도 불구하고, 어떤 문제로 위 에러가 발생하는 걸까요?

확장자를 TS로 변경했을 때 코드에는 ESM의 import, export를 사용했는데 왜 package.json파일의 ESM 관련 옵션인 "type": "module"을 제거하는지 궁금합니다. GPT의 답변에 의하면TS 파일은 컴파일 과정에서 CommonJS나 ESM이나 알맞게 변환을 하기 때문에 해당 옵션이 필요 없고, Jest와의 호환성을 위해 "type": "module"을 제거해주는 것이고,JS파일은 기본적으로 CommonJS모듈 시스템을 사용하기 때문에 import문을 사용했으면 ESM방식으로 해석하도록 명시하기 위해서 "type": "module"을 추가한다.라고 설명을 해주는데 그럼 JS 파일의 경우 Jest와의 호환성을 고려하지 않는건지.. 이해가 잘 되지 않습니다. 혹시 설명을 해주실 수 있을까요?

환경 : mac os저의 경우에 npx ts-jest config:init 명령어를 통해 생성한 jest.config.js 파일의 내용이 다음과 같이 강의 영상과 달랐습니다./** @type {import('ts-jest').JestConfigWithTsJest} **/ module.exports = { testEnvironment: "node", transform: { "^.+.tsx?$": ["ts-jest",{}], }, };강의 영상 내용에 맞춰서 preset: 'ts-jest' 설정을 추가해주어 Jest가 TypeScript 파일을 컴파일하고 실행할 수 있도록 해주니 잘 동작합니다. 

안녕하세요 제로초님. 강의 교안이 어디있는지 모르겠습니다.

Cypress Colud Trial 13 days left라고 뜨는데 유료로 바뀌었나요?

안녕하세요, 선생님. 강의를 모두 듣고 개인 프로젝트에 적용해보고 있는 중에 궁금한 점이 생겨 질문 남깁니다.이번 강의에 나온 cypress cloud를 사용해서 테스트 자동화를 해보았는데 문득 cypress가 아니라 cypress cloud를 사용해서 테스트 자동화를 하는 이유가 무엇인지 궁금하더라고요.https://docs.cypress.io/guides/continuous-integration/github-actions위 문서를 찾아보니 cypress cloud는 테스트를 병렬로 진행해서 속도가 더 빠르다고 하는데 병렬 테스트를 위해 cypress cloud를 사용하는 것인지 궁금합니다.아니면 뭔가 다른 이유가 있을까요?

따라하며 배우는 리액트 테스트코드 강의에서 eslint가 적용되었다고 하는 파일자체를 받아 npm install을 헀는데,eslint가 작동되지않습니다.extension에서도 eslint를 받았고, npm install을 한 상태에서test()let test = () => {}와 같은 오류가 발생될 코드를 작성해도 eslint가 반응하지 못하는데 이유가 뭘까요 강의에는 설정이 적용되어있다고 하는데

(사진)

강의 1분쯤에 jest.config.cjs로 쓰는 것과 package.json에서 작성하는 법 2가지를 알려주셨을 때 전자대로 적용해 실행하니 아래와 같은 에러가 발생했습니다! 이후에 package.json에 작성해서 실행하는 방법으로 변경하니 정상적으로 작동했는데 혹시 이 원인을 알 수 있을까요? modules를 import하지 못한 이유를 잘 모르겠습니다!

위 화면처럼 connect ECONNREFUSED::1:54382등 locahost에 접근할 수 없다고 나오면 cypress.config.ts에서 baseurl 설정해야합니다.(https://parkparkpark.tistory.com/186)import { defineConfig } from "cypress"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here }, }, });