오늘 우리는 브라우저에서 실행할 코드를 어떻게 사용하는지 배울 것이다.

You can checkout the source code examples on github

테이프 테이프란 무엇입니까?

Tape는javascript 테스트 프레임워크로 기본적인 기능 집합만 제공하기 때문에 코드에 대해 단언할 수 있습니다.

왜 테이프를 사용합니까?

이것은 내가 너에게 테이프를 팔려고 시도한 부분이지만, 나는 이렇게 하지 않을 것이다.
만약 인터넷 사이트에서 더 많은 정보를 검색한다면, 이 프레임워크의 단순성은 당신의 테스트 (그리고 전체 코드 라이브러리) 를 더욱 쉽게 유지할 수 있다는 것을 누군가가 알려줄 것이다.속지 마세요.
아날로그 aax 호출이나 웹 소켓 연결이 필요하거나 모듈에 원숭이 패치가 필요한 것을 발견하면 같은 더 기능적인 테스트 프레임워크를 찾는 것을 권장합니다.또는 결제jest.
필요한 경우 테이프를 사용하십시오.

측백나무 이걸 사용하래요.

테이프 설치부터 시작합니다.

npm install -D [email protected]

현재 시운전에 대해서는 simple.test.js 이라는 폴더에 test 파일을 만들 것입니다.다음은 테스트를 만듭니다.

// ./test/simple.test.js

var test = require('tape');

test('1 + 1 equals 2', function(t) {
  var sumResult = 1 + 1;
  t.equals(sumResult, 2);
  t.end();
});

여기서 무슨 일이 일어났습니까?
첫 번째 줄에서 우리는 일반적인 코드 라이브러리의 다른 모듈이 필요한 것처럼 tape 을 필요로 한다.그리고 우리는 그것을 공개하는 유일한 함수를 변수에 저장한다.우리가 현재 사용하고 있는 것은 require 이 아니라 import 이지만, 우리는 잠시 후에 이 문제를 해결할 것이다.
그리고 우리는 전화를 했다test.첫 번째 매개 변수는 제목과 문자열입니다. 우리가 테스트하고 있는 내용을 설명해야 합니다.두 번째 파라미터는 실제 테스트입니다. 우리는 그것을 리셋으로 전달합니다.
너는 우리가 리셋에서 대상을 얻었다는 것을 알아차릴 것이다.이 대상은 우리의 단언 실용 프로그램이다.그것은 단언에 실패했을 때 유용한 정보를 보여 주는 를 가지고 있다.여기에서, 나는 그것을 t 라고 명명합니다. 왜냐하면 이것은 당신이 문서에서 그것을 찾는 방식이기 때문입니다.
마지막으로, 우리는 테이프에 테스트는 t.end() 를 사용해야 한다고 명확하게 말했다.
테이프의 흥미로운 점은 테이프가 매우 복잡한 테스트 환경이 아니라는 점이다.이 테스트는 node를 사용하는 다른 스크립트처럼 실행할 수 있습니다.따라서 터미널에 쓰기 node ./test/simple.test.js 만 하면 출력 보고서를 얻을 수 있습니다.

$ node ./test/simple.test.js

TAP version 13
# 1 + 1 equals 2
ok 1 should be equal

1..1
# tests 1
# pass  1

# ok

여러 개의 테스트 파일을 실행하려면 테이프에서 제공하는 바이너리 파일을 사용할 수 있습니다.이렇게 하면 tape 이라는 명령에 액세스하여 set of methods 을 전달할 수 있습니다.예를 들어, .test.js 라는 폴더에서 test 로 끝나는 모든 테스트 파일과 일치하는 모든 테스트 파일을 실행하려면 다음과 같은 내용으로 npm 스크립트를 작성할 수 있습니다.

tape './test/**/*.test.js'

글로벌 모델 ES6 모듈 사용

우리는 몇 가지 방법으로 이 점을 실현할 수 있다.

babel 레지스터 포함

Warning: This wont work with node versions that have native support for ES modules. I think this includes Node 12.17 and beyond.

만약 babel을 설치하고 가장 좋아하는 사전 설정과 플러그인을 사용하여 설정했다면, @babel/register 원본 코드와 같은 babel 설정을 사용하여 테스트 파일을 컴파일할 수 있습니다.

npm install -D @babel/[email protected]

그리고 tape 로고가 있는 -r 명령을 사용하여 @babel/register 을 요구할 수 있습니다.이렇게

tape -r '@babel/register' './test/**/*.test.js'

리퀴어 연결

Warning: This wont work with babel 7.

이 문제를 해결하는 또 다른 방법은 설정 스크립트에서 사용하는 것이다 .

npm install -D [email protected] [email protected]

이제 다음과 같은 내용을 포함하는 setup.js 을 만듭니다.

// ./test/setup.js

const hooks = require('require-extension-hooks');

// Setup js files to be processed by `require-extension-hooks-babel`
hooks(['js']).plugin('babel').push();

마지막으로, 우리는 -r 명령에서 tape 표지를 사용해야 한다.

tape -r './test/setup' './test/**/*.test.js'

확장 연결 필요 esm 사용

코드를 전송하지 않아도 import 문장을 사용할 수 있습니다. 패키지가 있으면 노드 환경에서 ES6 모듈을 사용할 수 있습니다.

npm install -D [email protected]

테이프와 함께 사용합니다.

tape -r 'esm' './test/**/*.test.js'

For more information about esm see

회사 명 DOM 테스트

우리가 여기에 이런 코드를 가지고 있다고 상상해 보세요.

// ./src/index.js

// this example was taken from this repository:
// https://github.com/kentcdodds/dom-testing-library-with-anything

export function countify(el) {
  el.innerHTML = `
    <div>
      <button>0</button>
    </div>
  `
  const button = el.querySelector('button')
  button._count = 0
  button.addEventListener('click', () => {
    button._count++
    button.textContent = button._count
  })
}

우리가 여기서 얻은 것은 (불안한 부족한 번호를 제외하고) 즉흥적인 구성 요소입니다. 단추가 있어서 눌린 횟수를 계산할 수 있습니다.
이제 이 단추에서 클릭 이벤트를 터치하고 DOM의 실제 업데이트 여부를 확인하여 이를 테스트하고자 합니다.다음은 코드를 테스트하는 방법입니다.

import test from 'tape';
import { countify } from '../src/index';

test('counter increments', t => {
  // "component" setup
  var div = document.createElement('div');
  countify(div);

  // search for the button with the good old DOM API
  var button = div.getElementsByTagName('button')[0];

  // trigger the click event
  button.dispatchEvent(new MouseEvent('click'));

  // make the assertion
  t.equals(button.textContent, '1');

  // end the test
  t.end(); 
});

안타깝게도 만약 우리가 이 테스트를 실행하려고 시도한다면, 그것은 많은 원인으로 인해 실패할 것이다. 첫 번째 원인은 document 노드에 존재하지 않기 때문이다.하지만 이를 극복하는 방법을 살펴볼 것이다.

가짜 DOM 방식

명령줄에서 테스트를 계속하려면 을 사용하여 node에서 작업하는 DOM을 사용할 수 있습니다.나는 게으르기 때문에 JSDOM의 포장기JSDOM를 사용하여 이 위조 환경을 설정할 것이다.

npm install -D [email protected]

이제 설정 스크립트를 만듭니다.

// ./test/setup.js

import browserEnv from 'browser-env';

// calling it this way it injects all the global variables
// that you would find in a browser into the global object of node
browserEnv();

// Alternatively we could also pass an array of variable names
// to specify which ones we want.
// browserEnv(['document', 'MouseEvent']);

그것이 있으면 우리는 테스트를 실행하고 결과를 관찰할 수 있다.

$ tape -r 'esm' -r './test/setup' './test/**/*.test.js'

TAP version 13
# counter increments
ok 1 should be equal

1..1
# tests 1
# pass  1

# ok

그러나 JSDOM을 신뢰하지 않거나 테스트를 실행하는 노드 프로세스에 전역 변수를 주입하는 것이 나쁜 생각이라고 생각되면 다른 방식으로 시도할 수 있습니다.

브라우저 환경 실제 거래 사용

테이프는 간단한 프레임워크이기 때문에 실제 브라우저에서 테스트를 실행할 수 있다.번들로 코드를 컴파일하고 있을 수도 있습니다. 테스트를 컴파일해서 브라우저에서 실행할 수 있습니다.
이 특정한 예시에 대해, 나는 그것을 작동시킬 수 있는 최소한의 웹 패키지 설정을 보여 줄 것이다.시작합시다.

npm install -D [email protected] [email protected] [email protected] [email protected]

구성 시작...

// ./webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { join } = require('path');

module.exports = {
  entry: join(__dirname, 'test', 'simple.test.js'),
  mode: 'development',
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin()
  ],
  node: {
    fs: 'empty'
  }
}

데려다 달라고.

entry는 우리가 컴파일해야 할 테스트 파일이다.현재 이 입구점은 테스트 파일이지만 웹 패키지 기능을 이용하여 여러 개의 테스트 파일을 묶을 수 있습니다.

mode 개발 중이기 때문에 웹팩은 마력을 발휘하고 빠르게 증량하여 구축할 수 있다.

devtool 브라우저에서 코드를 디버깅할 수 있도록 내부 소스 코드 매핑으로 설정합니다.

plugins 우리는 하나밖에 없습니다. html 플러그인은 색인을 만듭니다.서버에서 사용하는 html 파일을 개발합니다.

node을(를) (으)로 설정합니다. 테이프는 원본 코드에서 이 모듈을 사용하지만 브라우저에 이 모듈이 존재하지 않기 때문에 웹 팩에 빈 대상으로 설정하라고 알려 줍니다.

현재 fs: 'empty' 명령을 사용하고 webpack-dev-server 에서 브라우저를 열면 아무것도 보이지 않지만 브라우저 콘솔을 열면 테이프의 테스트 출력을 볼 수 있습니다.

기타 출처

Write blazing fast Vue unit tests with Tape and Vue Test Utils

읽어주셔서 감사합니다.만약 당신이 이 문장이 매우 유용하다고 생각하고 나의 노력을 지지하고 싶다면, learn tape.
buy me a coffee ☕