Jest and react-automata test - Error of react-scrollbars-custom

[smuller97]

What is the current behavior?
Currently I'm working on a Jest test of my react application. When I run the application with 'npm start' the application is working fine. When I run my test with 'npm test', the test run through fine until it reaches the step, which includes the react-scrollbars-custom component.

The error comming up, when the test is run is :

---

FAIL src/Test/Lights.test.js
× lights with imported components (72ms)

● lights with imported components

scroller element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.

  24 |   const StateMachine = withStateMachine(lightMachine)(Lights)
  25 | 
> 26 |   testStateMachine(StateMachine, { fixtures });
     |   ^
  27 | });

  at Scrollbar.<anonymous> (node_modules/react-scrollbars-custom/dist/rsc.js:1558:15)
      at Array.forEach (<anonymous>)
      at Array.forEach (<anonymous>)
  at Object.<anonymous>.test (src/Test/Lights.test.js:26:3)        

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11958
The above error occurred in the component:
in Scrollbar (at Accept.jsx:10)
in div (at Accept.jsx:8)
in Accept (at Lights.jsx:31)
in Conditional (created by Context.Consumer)
in State (at Lights.jsx:30)
in div (at Lights.jsx:14)
in Lights (created by Context.Consumer)
in Automata

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 3 passed, 3 total
Time: 3.526s
Ran all test suites.

---

When I remove the scrollbar component and keep the internal data the test approves all the way. And vice versa, when I remove the internal data, so the scrollbar is left, the test fails and show the above error message.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-scrollbars-custom. Paste the link to your JSFiddle or CodeSandbox example below:
Here is a link to a reproduction of the problem: https://github.com/smuller97/react-custom-scrollbar-test .
After downloading the source-code to your local machine, you run the commands:

1. npm i
2. npm test

What is the expected behavior?
The expected behavior is for the unit-test to run through.

A little about versions:

• OS: Winows 10
• Browser (vendor and version): Google Chrome Version 79.0.3945.88 (Officiel version) (64-bit)
• React: 16.12.0,
• react-scrollbars-custom: ^4.0.21
• Did this worked in the previous package version? I haven't tried a previous package version

[MarcusHurney]

I'm getting the same error in my tests. Did you figure out a solution here?

[smuller97]

I'm getting the same error in my tests. Did you figure out a solution here?

Unfortunately no, I didn't find a solution using the custom scrollbar. I decided to use CSS instead by adding overflow:scroll, which made my tests being accepted :)

[MarcusHurney]

@smuller97 Thanks! I'll try that too.

[rgbabaev]

Same problem with react-test-renderer

[xobotyi]

Got similar issue today with karma's tests reason was in cleanup methods.
Container holding element been deleted earlier than test is ended by other test cleanup so in general it was kinda race condition.

Ive ended up making separate container for each test and removing them only when whole suite is done.

[WizardCM]

Running into the same issue. I feel the better solution would be that the library should fall back to just rendering children normally & logging a warning if it's unable to create the scroller rather than throwing an error.

Code:

import renderer from 'react-test-renderer';

describe('component with scrollbar', () => {
    it('renders correctly', async () => {
        let tree;
        await renderer.act(async () => {
            tree = renderer.create(<ComponentWithScrollbar />);
        });

        expect(tree.toJSON()).toMatchSnapshot();
    });
});

Error:

 FAIL  src/js/__tests__/ComponentWithScrollbar.test.js (13.398 s)
  component with scrollbar
    × renders correctly (380 ms)

  ● component with scrollbar › renders correctly

    scroller element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.

Edit: Here's what I ended up using

class ScrollbarWithFallback extends Component {
    constructor(props) {
        super(props);
        this.state = { fallback: false };
    }
    static getDerivedStateFromError(error) {
        let fallback = false;
        if (error?.message?.startsWith('scroller element was not created')) {
            console.error("Scrollbar element couldn't be created. Rendering children directly.");
            fallback = true;
        }
        return { fallback };
    }
    render() {
        if (this.state.fallback) return this.props.children;
        return <Scrollbar disableTracksWidthCompensation>{this.props.children}</Scrollbar>;
    }
}

This way I'm also not blocking other errors from hitting my real error boundary.

[SimonPotier]

Im getting this error has well when running my tests using jest.
Im using @WizardCM custom HOC (thx dude) for now, hoping someone comes up with a better solution.