小编Bik*_*ram的帖子

我不知道为什么react-slick 在形成滑块时添加了以下内联属性。

width: 100%; display: inline-block;

因此，我的应用程序自己的 CSS 不起作用并且行为不同。请帮助我理解并解决这个问题。

请点击提到的链接，我试图模仿与react-slick相关的问题 https://stackblitz.com/edit/react-b8wcgf

在我的反应应用程序中，我使用React.lazy(() => import("...")). 但我无法实现支持延迟加载的测试用例。

如果没有React.lazy(() => import("..."))我的测试用例，则工作正常，但仅使用React.lazy它就无法工作。

请帮忙。

授权.jsx

import React, { Suspense } from "react";
import { Switch, Route } from "react-router-dom";

const SignIn = React.lazy(() => import("../../components/SignIn/SignIn"));

const Authentication = props => {
    return (
        <div id="wrapper" className="bg-gradient-primary">
            <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                    <Route path="/sign-in" component={SignIn} />
                </Switch>
            </Suspense>
        </div>
    );
};

export default Authentication;

这是我的测试代码。

授权规范.jsx

import React from "react";
import { shallow } from "enzyme";
import Authentication from "./Authentication";
import SignIn from …

在我的反应应用程序中，我模仿了引导下拉菜单。而且它运行良好。

我想测试 useCallback、useEffect 和 document 方法

执行点：

1. 组件加载时handleMouseEvent将附加到document mouseup event. 当mouseup event触发时，就会执行handleMouseEvent。
2. 然后hasFocus方法将返回下拉列表的焦点状态。
3. 然后使用焦点状态，下拉菜单将显示或隐藏。

下拉菜单.jsx

const Dropdown = props => {

    let dropdownRef = createRef();

    const hasFocus = useCallback((target) => {
        if (!dropdownRef) return false;

        let dropdownHasFocus = false;
        const nodeIterator = document.createNodeIterator(
            dropdownRef, NodeFilter.SHOW_ELEMENT, null, false
        );
        let node;

        while (node) {
            if (node === target) {
                dropdownHasFocus = true;
                break;
            }
            node = nodeIterator.nextNode()
        }

        return dropdownHasFocus;

    }, …