Компонент Testing React, основанный на импортируемых извне js, с помощью Enzyme

Question

У меня возникла небольшая досадная проблема при попытке протестировать компонент реагирующего модального класса в Enzyme, класс использует bootstrap и jQuery, приложение ниже.

componentDidMount() {
    // @ts-ignore
    $('#' + this.props.modalId).modal('toggle');
    this.addKeydownHandler();
}

componentWillUnmount() {
    this.removeKeydownHandler();
    // @ts-ignore
    $('#' + this.props.modalId).modal('toggle');
}

addKeydownHandler = () => {
    $(document).on('keydown', (e: any) => { this.preventTabKey(e) });
}

removeKeydownHandler = () => {
    $(document).off('keydown', (e: any) => { this.preventTabKey(e) });
}

Я импортирую всев моем индексном файле, чтобы они были доступны по всему веб-сайту, как показано ниже.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import * as jquery from 'jquery';
(window as any).jQuery = jquery;
import 'popper.js';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

И я вызываю монтирование фермента, как показано ниже.

var children = <div className="fgsr" ><p>Test</p></div>
    var modal = Enzyme.mount(
        <Modal modalId={"testId"} >
            {children}
        </Modal>
    );

Проблема в том, что я простомонтируя модал для тестирования, я получаю различные ошибки - «TypeError: $ (...). модал не является функцией» и «Bootstrap js требуется jQuery», если я просто добавляю bootstrap js

Хакерское исправление состоит в том, чтобы просто добавить импортируемые ниже данные в класс Modal, но, очевидно, не нужно включать несколько больших файлов только для запуска тестов.

import * as jquery from 'jquery';
(window as any).jQuery = jquery;
import '../../../../node_modules/bootstrap/dist/js/bootstrap.min.js';

Есть ли обходной путь для этого илиспособ добавить дополнительный импорт в установленную оболочку Enzyme?

Answer 1

Кажется, что нет никакого способа вставить импортированные извне js-файлы в энзимную оболочку для тестирования, но есть хороший обходной путь.Я просто создал тестовый компонент утилиты со всеми импортированными зависимостями, который принимал дочерние элементы в качестве реквизитов и просто возвращал дочерние элементы в этом компоненте, как показано ниже.

import * as React from 'react';
import * as jquery from 'jquery';
(window as any).jQuery = jquery;
import 'popper.js';
import '../../../node_modules/bootstrap/dist/js/bootstrap.min.js';

export interface Props {
    children: JSX.Element;
}

const DependencyContainer = ({ children }: Props) => {
    return (children);
}

export default DependencyContainer;

А затем в моем тестовом классе просто поместил мой компонент в этот контейнер.

var modal = Enzyme.mount(
        <DependencyContainer>
            <Modal>
                {children}
            </Modal>
        </DependencyContainer>
    );

Таким образом, нет необходимости дополнительно импортировать файлы в рабочий код.

Answer 2

Я думаю, что jQuery не инициализируется в переменной "$" (и ваш компонент нуждается в этом).

Вы можете попробовать это:

import {$,jQuery} from 'jquery';
window.$ = $;