TypeScript Linting Issues With 'react-test-renderer/shallow'

[JimLynchCodes]

First of all, I don't know why this project on npm points to this repo, but that's pretty sloppy...

Anyway, I am using reanct-test-renderer's shallow rendering like so:

import ShallowRenderer from 'react-test-renderer/shallow';

describe('LoginSection', () => {

    describe('Passing props to LoginBtn Child', () => {

        it('should pass "false" to LoginBtn when given no props.', () => {

            const shallowRenderer = new ShallowRenderer();
            shallowRenderer.render(<LoginSection />);
            const shallowResult = shallowRenderer.getRenderOutput();

            expect(shallowResult.props.children).toContainEqual(
                <LoginBtn currentlyLoggedIn={false} />,
            );

        });
    });
});

This test passes, but I'm getting linting errors on the import statement gives me an error message, Could not find a declaration file for module 'react-test-renderer/shallow'. '/Users/jim/..../node_modules/react-test-renderer/shallow.js' implicitly has an 'any' type. Try npm install @types/react-test-renderer if it exists or add a new declaration (.d.t

Once I install the types package npm install @types/react-test-renderer then that linting error goes away, but then there is a new linting error underlining new ShallowRenderer() with the message, This expression is not constructable. Type 'typeof import("/Users/jim/....../node_modules/@types/react-test-renderer/shallow/index")' has no construct signatures.

And this is where I am stuck... 🤔

[JimLynchCodes]

Found one solution here: https://stackoverflow.com/a/59512524/1910355

Basically, instead of using the new keyword you can just create an instance like so:

const shallowRenderer = ShallowRenderer.createRenderer();

[JimLynchCodes]

reactjs/react.dev#2646

No need to thank me; I'm just @JimTheMan 👍