안녕 내 Js 형제들! TypeScript와 충돌하고 미친 듯이 사랑에 빠졌습니까? 그러나 당신의 사랑을 테스트하는 방법을 궁금해 한 적이 있습니까? 그렇다면 두려워하지 마십시오! 여기 우리가 다시 간다! 아름다운 테스팅의 세계로!!

또한 계속 지켜봐주십시오! 바로 다음 블로그에서 몇 가지 놀라운 DevOps 항목을 배우고 이를 Github Actions와 통합할 것이기 때문입니다!

어쨌든 모험을 시작합시다!

0단계: 프로젝트 시작

폴더를 만들고 선호하는 편집기(mine VS Code)에서 엽니다. 그런 다음 프로젝트 터미널에 이 명령을 입력합니다.

npm init -y

(다운로드한 모든 패키지 등을 추적하기 위해 package.json 파일을 생성합니다.)

보너스 단계: TypeScript 추가

환경을 설정하고 TypeScript 파일을 실행하는 방법에 대해 약간 잃어버린 사람들을 위해 이것을 확인하십시오.

암튼 요컨대 (자세한 내용은 위 링크를 확인하세요)

타이프 스크립트 설치

npm i typescript 

tsconfig 초기화
(npm i -g typescript를 입력하지 않은 경우 typescript가 전역적으로 설치되어 있는지 확인하십시오. 이전의 일반 npm i typescript 명령과 혼동하지 마십시오.)

tsc --init

(.tsconfig 파일이 생성됩니다)

ts-node 및 ts-node-dev 설치

npm i ts-node ts-node-dev

이제 app.ts 파일을 만들고 나중에 테스트할 기본 함수를 만들어 봅시다!

app.ts 파일에 이것을 작성하십시오.

export const add = (num1: number, num2: number)=> {
  return num1 + num2;
};

이제 그 길을 벗어나 아름다운 테스트의 세계로 뛰어들자!

1단계: Jest 설정

다음 명령을 사용하여 다음 패키지를 설치합니다.

npm i -D jest ts-jest @types/jest

Jest는 여기서 사용할 테스트 라이브러리입니다.

(npm i -D X는 npm install --save-dev X의 줄임말입니다.)

이제 다음 명령을 입력하십시오

 npx ts-jest config:init

다음 내용이 포함된 package.json과 동일한 수준에서 jest.config.js 파일을 생성합니다.

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

이제 package.json 내에서 test라는 스크립트를 작성하고 값을 jest로 지정합니다. 다음과 같이 보일 것입니다.

{
  ...other package.json stuff
  "scripts": {
    "test": "jest"
  },
  ...other package.json stuff
}

이제 몇 가지 테스트를 작성해 봅시다!

2단계: 일부 테스트 작성

package.json과 동일한 수준에 테스트라는 폴더를 만듭니다. 그리고 그 안에 모든 테스트 파일을 작성하십시오. 짐작하셨겠지만 테스트 파일의 이름은 {file_name}.test.ts와 같습니다.

이제 app.ts 파일을 테스트하기 위해 app.test.ts라는 테스트 파일을 만들어 보겠습니다.

app.test.ts 파일 안에 이것을 작성하십시오. 주석을 읽고 각 단어와 각 줄이 무엇을 하는지 자세히 알아보세요!

// @By SilvenLEAF
import { add } from '../app';



describe('Add function Tests', () => {
  test('Adding 5 and 3 to be number 8', () => {
    expect(add(5, 3)).toBe(8)
  })

  test('Adding 7 and 2 to be string "9"', () => {
    expect(add(7, 2)).toBe('9')
  })

  test('Adding 3 and 2 to be 5', () => {
    expect(add(3, 2)).toBe(5)
  })
})


/*
---------------------------------------
   Let's learn how to write a test
---------------------------------------
  METHOD 1:

  test("Your Test Name", ()=>{
    expect(something).toBe(something)
  })

  [OR]

  METHOD 2:

  it("Your Test Name", ()=>{
    expect(something).toBe(something)
  })


--------------------------------------------
.  Modularizing your tests collection
--------------------------------------------

  describe('your test module name', () => {
    // inside here you'll write the tests for this module, you can use both test() or it(())
    test('if it does this thing', () => { expect(something).toBe(something) });
    test('if it does the other thing', () => { expect(something).toBe(something) });
  });

  [OR]

  describe('your test module name', () => {
    // inside here you'll write the tests for this module, you can use both test() or it(())
    it('if it does this thing', () => { expect(something).toBe(something) });
    it('if it does the other thing', () => { expect(something).toBe(something) });
  });

--------------------------------------------
.      With love from SilvenLEAF
--------------------------------------------
*/

3단계: 테스트 테스트

네, 이상하게 놀랍게 들립니다! 그래서 이것을 해보자! 3가지 명령 중 하나를 입력하여 테스트를 실행합니다.

npm 실행 테스트

npm 테스트

npm t

이것들은 모두 같은 일을 합니다. One은 other의 속기이고 그 반대도 마찬가지입니다! 어쨌든 실행해 보겠습니다. 다음과 같은 내용이 표시될 수 있습니다.


축하해요!! 우리는 방금 우리의 사랑하는 사랑 TypeScript를 테스트했습니다!! 너무 달콤해!


더 많은 것을 기대해 주세요! 다음 블로그에서 DevOps 세계에 뛰어들 것이기 ​​때문입니다! 우리는 CI, CD, Github 작업, 자동화 및 더 많은 것을 배울 것입니다!!

무엇 향후 계획?

1. 클라우드(Azure VM)에 배포하는 방법

2. Github 작업으로 DevOps 학습

3. 무엇이든 할 수 있는 개선된 AI BOT

4. JavaScript/TypeScript를 사용한 미친 짓

5. VS 코드 디버거로 TypeScript 디버깅

6. 후크 시퀀싱

7. XP 없이 Android 앱을 만드는 방법

(apk 생성 포함)

의심의 여지가 있습니까?

의견을 남기거나 Twitter에서 @SilveLEAF로 연락하거나

나에 대해 더 알고 싶어? 여기와!
SilvenLEAF.github.io