Невозможно издеваться над настраиваемым объектом addEventListener (e) - PullRequest
Новая
       33

Невозможно издеваться над настраиваемым объектом addEventListener (e)

0 голосов
/ 10 июля 2020

Привет, у меня проблема с издевательством над созданным пользователем объектом addEventListener. Ниже приведен мой код рендеринга реакции 

<Fragment>
            <div
                className={`${Styles.resizable} resizable`}
                ref={resizableRef}
                style={{ width: width, height: height }}
            >
                <div className={`${Styles.resizable_resizers} resizers`}>
                    <div
                        className={`${Styles.resizable_resizers_resizer} ${Styles[resizeDirection]} resizer ${resizeDirection}`}
                    ></div>
                    {children}
                </div>
                {maxCharacter !== null ? (
                    <div className={`${Styles.resizable__limit}`}>
                        {characterCount} / {maxCharacter}
                    </div>
                ) : null}
            </div>
        </Fragment>

Использование useLayoutEffect в перехвате React - я манипулирую DOM 

        const resizers = resizableRef.current.querySelectorAll(".resizable .resizer");
        for (let i = 0; i < resizers.length; i++) {
            const currentResizer = resizers[i];

            const resize = (e) => {
                if (currentResizer.classList.contains("bottomright")) {
                    resizableRef.current["style"].width =
                        e.pageX - resizableRef.current.getBoundingClientRect().left + "px";
                    resizableRef.current["style"].height =
                        e.pageY - resizableRef.current.getBoundingClientRect().top + "px";
                } else if (currentResizer.classList.contains("vertical")) {
                    resizableRef.current["style"].height =
                        e.pageY - resizableRef.current.getBoundingClientRect().top + "px";
                } else if (currentResizer.classList.contains("horizontal")) {
                    resizableRef.current["style"].width =
                        e.pageX - resizableRef.current.getBoundingClientRect().left + "px";
                }
            };

            const stopResize = () => {
                window.removeEventListener("mousemove", resize);
            };

            currentResizer.addEventListener("mousedown", (e) => {
                e.preventDefault();
                window.addEventListener("mousemove", resize);
                window.addEventListener("mouseup", stopResize);
            });
        }
    }, []);

Я писал модульный тестовый пример для приведенного выше кода, но кажется, что currentResizer.addEventListener ("mousedown", (e) => {....}); не подвергается насмешкам, и я не могу продолжить. Любая помощь будет оценена по достоинству.

1 Ответ

0 голосов
/ 12 июля 2020

Вы должны издеваться над resize и stopResize вместо currentResizer. Причины:

  • Не следует тестировать детали реализации, а сосредоточиться на функциональности. Если вы тестируете свою реализацию, в момент изменения кода ваши тесты ломаются. Но если вы тестируете функциональность, она не сломается.
  • Технически насмешливые методы и свойства функционального компонента пока недоступны в энзимах и шутках. Для компонентов класса мы можем использовать его wrapper.instance().method=jest.fn(). Но мы не можем сделать это в функциональных компонентах.

Одним из решений вашей проблемы является изменение кода компонента, чтобы он принимал методы resize и stopResize в качестве свойств. А потом поиздевайтесь над ними в тесте. Проверьте, вызываются ли они при mousemove и mouseup

...