Jsdom: scrollIntoView๋Š” ํ•จ์ˆ˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 12์›” 28์ผ  ยท  14์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jsdom/jsdom

a ํƒœ๊ทธ์—์„œ scrollIntoView ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ( grommet )๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. jsdom ๋Š” ํ•ด๋‹น ์ฝ”๋“œ ์ค„์„ ์ ์ค‘ํ•  ๋•Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ๋ฅผ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•ด testHelper ํŒŒ์ผ์— window.HTMLElement.prototype.scrollIntoView = function() {}; ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ž‘๋™ํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ ์ˆ˜์ •ํ•˜๋ ค๋Š” ํ•ญ๋ชฉ์ธ์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๋ณด๊ณ ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

css feature layout

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@QuantumInformation Jest์— ๋‹ค์Œ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Element.prototype.scrollIntoView = jest.fn();

๋ชจ๋“  14 ๋Œ“๊ธ€

์˜ˆ, ๊ตฌํ˜„๋˜์ง€ ์•Š์€ ๊ฒฝ๊ณ  ์Šคํ…์„ ์ถ”๊ฐ€ํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์„ ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์‹ค์ œ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด์— ๋Œ€ํ•œ ์›€์ง์ž„์ด ์žˆ์Šต๋‹ˆ๊นŒ?

Jest ํ…Œ์ŠคํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•  ๋•Œ ์š”์†Œ์—์„œ scrollIntoView๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งˆ์šดํŠธํ•˜๋ ค๊ณ  ํ•˜๋Š”๋ฐ ํ…Œ์ŠคํŠธ๊ฐ€ ํ•ญ์ƒ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.

TypeError: node.scrollIntoView is not a function
        at Object.scrollInToView src/component/shared/foo.tsx:7
        at User.Object.<anonymous>.User.componentDidMount

@QuantumInformation Jest์— ๋‹ค์Œ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Element.prototype.scrollIntoView = jest.fn();

์ด ์ˆ˜์ • ์‚ฌํ•ญ์€ ์–ด๋””์—์„œ๋‚˜ ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? chai์™€ ํ•จ๊ป˜ ํšจ์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. '์š”์†Œ๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค'๋ผ๋Š” ๋ฉ”์‹œ์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

tsconfig ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์š”์†Œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ฆ‰
'๋”'

@qmg-JamesT ๋‹ค๋ฅธ ์š”์†Œ๋“ค์ด scrollIntoView ๋ฉ”์†Œ๋“œ์—์„œ ์ƒ์†๋˜๋Š” ์ „์—ญ ์š”์†Œ ํด๋ž˜์Šค์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, jest๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ด์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์•ˆ๋…•ํ•˜์„ธ์š”, window.HTMLElement.prototype.scrollIntoView = jest.fn()์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Element.prototype.scroll = jest.fn()์— ๋Œ€ํ•ด์„œ๋„ ๋™์ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

@enessoylu ๋ฐ @msmetana Element.prototype.scrollIntoView = jest.fn() ๋ฅผ ๊ฐ .test์— ๋„ฃ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

CRA๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ setupTest.ts๊ฐ€ ์žˆ๊ณ  ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ idk

import '@testing-library/jest-dom/extend-expect'

Element.prototype.scroll = jest.fn()

ava ๋˜๋Š” ๋‹ค๋ฅธ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ๋Ÿฌ๋„ˆ์˜ ๊ฒฝ์šฐ window.HTMLElement.prototype.scrollIntoView = () => {} ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  test.beforeEach() ๋˜๋Š” ํ…Œ์ŠคํŠธ ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋ฅผ ์œ„ํ•ด ์„ค์ •ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ถฉ๋ถ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

Element.prototype.scrollIntoView` = () => {};

setupJest.ts์— ํ•œ ๋ฒˆ

์ด๊ฒƒ์€ scroll ์˜ ๊ฒฝ์šฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Element.prototype.scrollIntoView = jest.fn();

๊ฐ์‚ฌ ํ•ด์š”! ๊ทธ๊ฒƒ์€ ํšจ๊ณผ๊ฐ€ ์žˆ์—ˆ๋‹ค.

์ด๊ฑธ๋กœ ํ•ด๋ด..
window.HTMLElement.prototype.scrollIntoView = function() {};

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰