samedi 7 juillet 2018

Redux + Typescript + Jest test issue - target container not a DOM element

I've been trying to fix this for a while. I've looked up various tutorials and Github issues but can't seem to get it working. The issue happens when testing a component whose descendant is connected. I have a component I am trying to test:

interface Props {status: StatusType;}

export class DumbApp extends React.Component<Props, {}> {

    render(): JSX.Element {
        return (
            <div>
                <Header/>
            </div>
        );
    }

}

export default connect(
    (state: RootState) => ({
        status: state.session.status
    }),
    null
)(DumbApp);

In my test, I'm just trying to test the <DumbApp/> export (the unconnected one). So I have something like this:

import { DumbApp } from "../App";

describe("App.tsx - DUMB", () => {
    it("renders the header", () => {
        const ShallowHome: ShallowWrapper = shallow(<DumbApp status={StatusType.IDLE}/>);
    });
});

The test doesn't do anything at the moment, just creates a shallow wrapper of the dumb component. When I run this test I get 2 errors. First:

Invariant Violation: Target container is not a DOM element.

    8 | export const store: Redux.Store = configureStore(null);
    9 | 
> 10 | render(
        |        ^
    11 |     <Provider store={store}>
    12 |         <App/>
    13 |     </Provider>,

And the second is "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

The dumb component itself isn't connected, but it does render a <Header/> component, which renders a <Searchbox/> component and that component is connected. I found another SO post which said to use jest.mock() to replace the rendered children with plain components, but I tried a bunch of ways using that and I still get the same error. Is jest.mock() the way to solve this? Or is the error somewhere else.

Aucun commentaire:

Enregistrer un commentaire