Jsdom: document.activeElement๋Š” jsdom 15/16(jest 25)์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•œ ํ›„ ํ•ญ์ƒ null์ž…๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 03์›” 27์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jsdom/jsdom

๊ธฐ๋ณธ ์ •๋ณด:

์šฐ๋ฆฌ๋Š” expect(document.activeElement).toBe(myElement) ํŒจํ„ด๊ณผ ํ•จ๊ป˜ ๋†๋‹ด ํ…Œ์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํ˜ธ์ž‘์šฉ ํ›„์— ์š”์†Œ๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดˆ์ ์„ ๋งž์ถ”์—ˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. jest 25(jsdom 15)๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•œ ํ›„ ์ด๋Ÿฌํ•œ ๋ชจ๋“  ํ…Œ์ŠคํŠธ๊ฐ€ ์ค‘๋‹จ๋˜์—ˆ๊ณ  document.activeElement ๋Š” ํ•ญ์ƒ null๋กœ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. jsDom 16์„ ์‚ฌ์šฉํ•˜์—ฌ ์‹คํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

Jest ํŒ€ ์€ ์—ฌ๊ธฐ์—์„œ ๋ฌธ์ œ๋ฅผ ์—ด

  • Node.js ๋ฒ„์ „: 10.19.0
  • jsdom ๋ฒ„์ „: 15 ๋ฐ 16
  • ๋†๋‹ด ๋ฒ„์ „: 25.1.0

์ตœ์†Œํ•œ์˜ ์žฌ์ƒ์‚ฐ ์ผ€์ด์Šค

import * as React from 'react';

it('should find active element', () => {
    const wrapper = mount(<input />);
    const inputNode = wrapper.find('input').getDOMNode();
    expect(document.activeElement).not.toBe(inputNode);
    inputNode.focus();
    expect(document.activeElement).toBe(inputNode); // fails here with expected being null
});

์œ ์‚ฌํ•œ ์ฝ”๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ?

ํฌ์ปค์Šค๋œ ์š”์†Œ๋Š” document.activeElement ๋ฐ˜์˜๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์€ ๋ฌธ์ œ ํ…œํ”Œ๋ฆฟ์„ ๋”ฐ๋ฅด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ž˜๋ชป๋œ JavaScript ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜๊ณ  ์ •์˜๋˜์ง€ ์•Š์€ ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ ํ…œํ”Œ๋ฆฟ์„ ๋”ฐ๋ฅด๋„๋ก ๊ฒŒ์‹œ๋ฌผ์„ ํŽธ์ง‘ํ•˜์—ฌ Node.js์—์„œ ๋‹จ์ผ ํŒŒ์ผ๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ˜ํ”Œ์„ ์ƒ์„ฑํ•œ ๋‹ค์Œ ๋Œ“๊ธ€์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”. ๋˜ํ•œ jsbin ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๋งํฌ๋ฅผ ๊ฐ•๋ ฅํžˆ ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๋•Œ ์šฐ๋ฆฌ๋Š” ์ด ๋ฌธ์ œ๋ฅผ ๋‹ค์‹œ ์—ด๊ณ  ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฅ๋ฏธ๋กญ๊ฒŒ๋„, ํšจ์†Œ์™€ ๊ด€๋ จ๋œ ๊ฒƒ๋“ค์ด ์—†์–ด๋„ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

https://runkit.com/wojtekmaj/jsdom-15-2-16-document-activeelement-issue-ok

๊ทธ๋Ÿฌ๋‚˜ v15.2 ์ดํ›„๋กœ ์—ฌ์ „ํžˆ ํšŒ๊ท€ํ•˜๋Š” #2586๊ณผ ๋ฐ€์ ‘ํ•˜๊ฒŒ ๊ฒฐํ•ฉ๋  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

https://runkit.com/wojtekmaj/jsdom-15-2-16-document-activeelement-issue

๊ด€๋ จ: enzymejs/enzyme#2337

activeElement ๋ฅผ document ์™ธ๋ถ€์˜ ์š”์†Œ๋กœ ์„ค์ •ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์— ๋Œ€ํ•œ jsdom์˜ ์—„๊ฒฉํ•จ์ด ์ฆ๊ฐ€ํ•˜์—ฌ ์ค‘๋‹จ์ด ๋ฐœ์ƒํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ˆ˜์ • ์‚ฌํ•ญ์€ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ๋งˆ์šดํŠธ ํ˜ธ์ถœ์— attachTo ์ธ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

๊ด€๋ จ ๋ฌธ์ œ

drewish picture drewish  ยท  4์ฝ”๋ฉ˜ํŠธ

kentmw picture kentmw  ยท  3์ฝ”๋ฉ˜ํŠธ

josephrexme picture josephrexme  ยท  4์ฝ”๋ฉ˜ํŠธ

khalyomede picture khalyomede  ยท  3์ฝ”๋ฉ˜ํŠธ

kilianc picture kilianc  ยท  4์ฝ”๋ฉ˜ํŠธ