I need help about writing tests, element.scrollWidth always is 0 about beautiful-react-hooks

[liucan233]

I modified my source code, but I still can't write test cases well.

// src/useInfiniteScroll.ts

import { useRef } from "react";
import useEvent from "./useEvent";
import useCreateHandlerSetter from "./factory/createHandlerSetter";
/**default event options */
const DEFAULT_EVENT_OPTIONS = {
    passive: true,
    capture: false,
};
/**default scroll options */
const DEFAULT_SCROLL_OPTIONS = {
    direction: "y",
    distance: 10,
};
/**default element state */
const DEFAULT_ELEMENT_STATE = {
    scrollWidth: -1,
    scrollHeight: -1,
};
/**
 * Accepts an HTML Element ref, then returns a function that allows you to handle the infinite
 * scroll for that specific element.
 */
function useInfiniteScroll(ref, options) {
    const optionsRef = useRef({
        event: DEFAULT_EVENT_OPTIONS,
        scroll: DEFAULT_SCROLL_OPTIONS,
    });
    if (typeof options === "object") {
        optionsRef.current.scroll = options.scroll;
        // To avoid invalid useEvent updates
        if (options.event.capture !== optionsRef.current.event.capture ||
            options.event.passive !== optionsRef.current.event.passive) {
            optionsRef.current.event = options.event;
        }
    }
    else {
        optionsRef.current.event = DEFAULT_EVENT_OPTIONS;
        optionsRef.current.scroll = DEFAULT_SCROLL_OPTIONS;
    }
    const scrollOptions = optionsRef.current.scroll;
    const elementStateRef = useRef(DEFAULT_ELEMENT_STATE);
    const onScroll = useEvent(ref, "scroll", optionsRef.current.event);
    const [onScrollEnd, setOnScrollEnd] = useCreateHandlerSetter();
    const handleScroll = ({ target, currentTarget }) => {
        if (target === currentTarget &&
            target instanceof HTMLElement &&
            (target.scrollHeight !== elementStateRef.current.scrollHeight ||
                target.scrollWidth !== elementStateRef.current.scrollWidth)) {
            const delay = scrollOptions.delay || 250, distance = scrollOptions.distance || 10, inBottomOfY = target.scrollHeight <
                target.clientHeight + target.scrollTop + distance, inBottomOfX = target.scrollWidth <
                target.clientWidth + target.scrollLeft + distance;
            if ((scrollOptions.direction === "y" && inBottomOfY) ||
                (scrollOptions.direction === "x" && inBottomOfX) ||
                (scrollOptions.direction==='both'&&(inBottomOfX || inBottomOfY))) {
                elementStateRef.current = {
                    scrollWidth: target.scrollWidth,
                    scrollHeight: target.scrollHeight,
                };
                if (onScrollEnd.current) {
                    delay
                        ? setTimeout(onScrollEnd.current, delay)
                        : onScrollEnd.current();
                }
            }
        }
    };
    if (typeof scrollOptions.callback === 'function') {
        setOnScrollEnd(scrollOptions.callback);
    }
    onScroll(handleScroll);
    return setOnScrollEnd;
}
;
export default useInfiniteScroll;

There are a lot of dependency conflicts in this repo which leads to a very bad development experience, at the same time, because of exports in package.json, I can't use npm link. Below are packages that conflict has been resolved.

{
"dependencies": {
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1"
  },
  "peerDependencies": {
    "rxjs": ">=7.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.18.9",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "7.18.9",
    "@babel/preset-react": "7.18.6",
    "@babel/register": "^7.18.9",
    "@semantic-release/changelog": "6.0.1",
    "@semantic-release/commit-analyzer": "9.0.2",
    "@semantic-release/exec": "6.0.3",
    "@semantic-release/git": "10.0.1",
    "@semantic-release/github": "8.0.5",
    "@semantic-release/npm": "9.0.1",
    "@testing-library/react-hooks": "8.0.1",
    "@types/lodash.debounce": "4.0.7",
    "@types/lodash.throttle": "4.1.7",
    "@types/react-router-dom": "5.3.3",
    "@typescript-eslint/eslint-plugin": "5.30.7",
    "@typescript-eslint/parser": "5.30.7",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.5",
    "babel-plugin-istanbul": "^6.1.1",
    "babel-plugin-transform-require-ignore": "^0.1.1",
    "beautiful-react-ui": "0.57.1",
    "chai": "^4.3.6",
    "css-loader": "^6.7.1",
    "eslint": "^8.20.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-airbnb-typescript": "17.0.0",
    "eslint-plugin-chai-expect": "^3.0.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.0",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "4.6.0",
    "glob": "^8.0.3",
    "husky": "^8.0.1",
    "jsdoc-to-markdown": "^7.1.1",
    "jsdom": "^20.0.0",
    "jsdom-global": "^3.0.2",
    "mocha": "10.0.0",
    "mock-local-storage": "1.1.23",
    "mutation-observer": "1.0.3",
    "nyc": "^15.1.0",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "react-styleguidist": "11.2.0",
    "regenerator-runtime": "0.13.9",
    "rxjs": "7.5.6",
    "semantic-release": "^19.0.3",
    "sinon": "^14.0.0",
    "style-loader": "^3.3.1",
    "ts-loader": "9.3.1",
    "typescript": "4.7.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.73.0"
  }
}

@testing-library/react-hooks and react-styleguidist only lower react versions are supported.

[antonioru]

@liucan233 I'm sorry to hear about this 'very bad dev experience', to be fair this repository has only 2 dependencies: "lodash.debounce" and "lodash.throttle" so I don't see how it affects your development experience.

if you use node 14 and npm 6 you won't find any conflict in the devDependencies, just npm install and npm start

On top of that you can still use "npm link" by simply building the library or you can get rid of the "exports" from package.json as they'll get generated by the release pipeline.

That said, I'm not sure what you're trying to archive here... please provide context

[antonioru]

I'm closing this