Question

在尝试测试Enzyme中的react modal类组件时，这里有一个令人讨厌的问题，该类使用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>
    );

问题是，当我只是添加自举js时，当我只是挂载Modal进行测试时，会遇到各种错误-“ TypeError：$（...）。modal不是函数”和“ Bootstrap js需要jQuery”

即时/ hacky修复程序是将下面的导入内容简单地添加到Modal类中，但是显然不想为了使测试运行而包含多个大文件。

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

是否有解决方法或将额外的导入添加到安装了酶的包装中的方法？

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.$ = $;

使用Enzyme测试依赖于外部导入的js的React组件

2 个答案: