자기소개

준준이라고 하는 닉네임으로, 간사이를 거점으로 활동하고 있는 프런트 엔드 엔지니어입니다.

HAL 오사카 3회생입니다. (2017/12/20 현재)

이벤트나, 공부회에 참가하고 있으므로 꼭 만났을 때는 말씀해 주세요!

프런트 엔드에서도 테스트 쓰자!

HAL의 여러분, 테스트 쓰고 있습니까?

테스트... 있어? ? ? ? ? ? ? ?

프런트 엔드에서 테스트하고 도입합니까? ? ?

그런데, 나는 지금 같은 해의 오사카 HAL생으로 프런트 엔드에서 테스트를 쓰는 사람은 본 적이 없지만 테스트를 쓰자. 라는 이야기

테스트란 무엇인가?

시험이란 무엇인가?

컴퓨터 프로그래밍에서 단위 테스트 (단단한 테스트) 또는 유닛 테스트는 소스 코드의 개별 유닛, 즉 하나 이상의 컴퓨터 프로그램 모듈이 사용에 적합한지 여부를 결정하기 위해 관련 제어 데이터, 사용 절차, 조작 절차와 함께 테스트하는 기술입니다.

과연. 그 이름대로 테스트를 하는구나.

그럼 테스트는 어떻게 쓰나요? ?

테스트를 작성한다면 ava를 사용해 봅시다.

우선 로고 멋지다. 그것만으로 ava 채용하고 싶을 정도로는 멋있다.

설치

$ npm install --save-dev ava

package.json에 스크립트를 작성해 봅시다.

package.json

"scripts": {
  "test": "ava --verbose"
}

사용법

ava는 루트에있는 /test 디렉토리를 보러 간다.

test/hoge.js

import test from 'ava'

// 基本形
test('タイトル', t => {
  t.pass()
})

타이틀의 곳에는, 무슨 테스트를 하는지를 써 두는 것이 좋습니다.

실행

npm script에 달려 있기 때문에,

$ npm test

에서 실행할 수 있습니다.



이와 같이 테스트에 다니면 알기 쉽게 해줍니다.

테스트가 안된다면



이렇게 왜 테스트가 떨어졌는지, 어디에서 떨어졌는지를 알기 쉽게 표시해 줍니다.

좀 더 구체적인 테스트를 작성하고 싶습니다.

test/hoge.js

import test from 'ava'

// 基本形
test('タイトル', t => {
  t.pass()
})

test("1 + 1 = 2", (t) => {
  const a = 1
  const b = 1

  t.is(a + b, 2)
})

1+1은 2라고. 무엇인가 뭔가가 같은지 볼 때는, .is라고 하는 것을 잡습니다.

이 결과를 보면



테스트에 다니네요!

ava의 어설션은 그 밖에도 여러가지 있습니다만, 자세한 것은 희귀 D 째. MD를 참조해 주세요.

그러면 마지막으로 비동기적인 것의 테스트를 거쳐 갑니다. 예를 들어 API에 액세스 한 결과의 상태 코드는 200입니다. 같은 테스트를 작성하는 데 좋을 수 있습니다.

test/hoge.js

test("async test", async (t) => {
  const res = await new Promise((resolve) => {
    setTimeout(() => {
      resolve("hoge")
    }, 5 * 1000)
  })

  t.is(res, "hoge")
})

우선, 5초의 대기 시간을 주어 보았습니다.

async/await로 깔끔하게 깨지기 때문에 좋네요!

이 결과는



키틴과 다니네요!

후기

테스트를 많이 쓴 적이 없는 사람도 꼭, 테스트 건간 걸어 갑시다! !

자세하게 사용법을 보고 싶은 사람은 좋은 기사가 있으므로 그쪽을 참조해 주세요.

ava로 시작하는 테스트 자동화 입문 실천편

Twitter하고 있습니다! 꼭 따라주세요. @ 이 쥬냐

그렇게 큰 일을 쓰지 않았지만 일단 소스 코드는 이 쥬냐 / 아아~ st

에 있습니다!