{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/21-11-09-vanilla-javascript-input-and-test/", "result": {"data":{"site":{"siteMetadata":{"title":"irrationnelle","author":"irrationnelle","siteUrl":"https://dev.rase.blog","comment":{"disqusShortName":"","utterances":"irrationnelle/devlog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"fa9afe20-46e4-5d72-8986-41326cc36380","excerpt":"input element 에서 키입력값을 받아오는 방법 위의 방법으로는 키입력을 할 때마다 이벤트가 발생하지 않는다. 키입력마다 이벤트를 발생시키고 싶을 때는 아래처럼 이벤트에 이벤트 리스너를 설정한다. 위와 같이 이벤트 리스너를 설정한 뒤, 철자 하나 하나 입력이 아닌 지금까지 입력한 input 값을 사용하고 싶을 때는 를 사용한다. input 이벤트 리스너 테스트 방법 으로 테스트를 할 때 함수를 다음과 같이 사용해서 input…","html":"

input element 에서 키입력값을 받아오는 방법

\n
const input = document.createElement('input');\ninput.onchange = function(event) {\n    console.log(event);\n}\n\nconst inputSecond = document.createElement('input');\ninputSecond.addEventListener('change', function(event) {\n    console.log(event);\n})
\n

위의 방법으로는 키입력을 할 때마다 이벤트가 발생하지 않는다.

\n

키입력마다 이벤트를 발생시키고 싶을 때는 아래처럼 input 이벤트에 이벤트 리스너를 설정한다.

\n
const input = document.createElement('input');\ninput.oninput = function(event) {\n    console.log(event);\n}\n\nconst inputSecond = document.createElement('input');\ninputSecond.addEventListener('input', function(event) {\n    console.log(event);\n})
\n

위와 같이 이벤트 리스너를 설정한 뒤, 철자 하나 하나 입력이 아닌 지금까지 입력한 input 값을 사용하고 싶을 때는 input.value 를 사용한다.

\n

input 이벤트 리스너 테스트 방법

\n

@testing-library/dom 으로 테스트를 할 때 fireEvent 함수를 다음과 같이 사용해서 input 입력을 테스트 할 것이다.

\n
import { getByLabelText, fireEvent } from \"@testing-library/dom\";\n\ntest(\"input test\", () => {\n    const container = getContainer();\n    const inputEl = getByLabelText(container, \"example-input\");\n    fireEvent.change(inputEl, { target: { value: 'something to write' } })\n})
\n

그런데 이런 식으로 테스트를 하면 input 이벤트 리스너로 등록한 콜백 함수는 호출하지 않는다.

\n

fireEvent 가 아니라 @testing-library/user-event 의 type 메서드를 사용해도 마찬가지이다.

\n

이 때에는 직접 input event 를 dispatch 해주는 방식으로 키입력을 대신할 수 있다.

\n
import { getByLabelText } from \"@testing-library/dom\";\n\ntest(\"input test\", () => {\n    const container = getContainer();\n    const inputEl = getByLabelText(container, \"example-input\");\n    \n    const event = new Event(\"input\", {\n        bubbles: true,\n        cancelable: true,\n    });\n    inputEl.value = \"something to write\";\n    inputEl.dispatchEvent(event);\n})
\n

위와 같이 input event 를 dispatch 하면 input 이벤트 리스너로 등록한 콜백 함수를 호출하는 것을 확인할 수 있다.

","frontmatter":{"title":"vanilla javascript 로 키입력마다 input 이벤트 발생시키기 그리고 테스트","date":"November 09, 2021"}}},"pageContext":{"slug":"/21-11-09-vanilla-javascript-input-and-test/","previous":{"fields":{"slug":"/21-10-29-firebase-emulator-test/"},"frontmatter":{"title":"firebase 에뮬레이터로 테스트 코드 작성하기","category":"dev","draft":false}},"next":{"fields":{"slug":"/21-11-09-msw-tutorial/"},"frontmatter":{"title":"MSW 를 사용해서 실제 API 가 작동하는 것처럼 mocking 하기","category":"dev","draft":false}}}}, "staticQueryHashes": ["3128451518","3474900066"]}