a
ํ๊ทธ์์ scrollIntoView
๋ฅผ ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ( grommet
)๋ฅผ ์ฌ์ฉํ์ฌ ํ
์คํธ๋ฅผ ์คํํ๊ณ ์์ต๋๋ค. jsdom
๋ ํด๋น ์ฝ๋ ์ค์ ์ ์คํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค. ํ
์คํธ๋ฅผ ์ค์ ํ๊ธฐ ์ํด testHelper ํ์ผ์ window.HTMLElement.prototype.scrollIntoView = function() {};
๋ฅผ ์ถ๊ฐํ์ฌ ์๋ํ๋๋ก ํ ์ ์์์ง๋ง ์์ ํ๋ ค๋ ํญ๋ชฉ์ธ์ง ํ์ธํ๊ธฐ ์ํด ๋ณด๊ณ ํด์ผ ํ๋ค๊ณ ์๊ฐํ์ต๋๋ค.
์, ๊ตฌํ๋์ง ์์ ๊ฒฝ๊ณ ์คํ ์ ์ถ๊ฐํ ๊ฐ์น๊ฐ ์์ต๋๋ค. ๋ ์ด์์์ ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ค์ ๋ก ๊ตฌํํ ์ ์์ต๋๋ค.
์ด์ ๋ํ ์์ง์์ด ์์ต๋๊น?
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() {};
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
@QuantumInformation Jest์ ๋ค์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
Element.prototype.scrollIntoView = jest.fn();