DocumentTitle is undefined when running tests

[Birne94]

When using this library with TypeScript, I am encountering errors when running tests:

import DocumentTitle from 'react-document-title';

// ...

renderToString(
                    <DocumentTitle title="Hello World">
                        <AppComponen/>
                    </DocumentTitle>
);

My typings file:

// @types/react-document-title.d.ts

declare module 'react-document-title' {
    import * as React from 'react';

    interface DocumentTitleProps {
        title: string;
    }

    export default class DocumentTitle extends React.Component<DocumentTitleProps, any> {
        public static rewind(): string;
        public static peek(): string;
    }
}

This code runs perfectly fine when executed on the server, but during testing it fails:

Invariant Violation: Element 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.

Debugging shows that the import of react-document-title simply returns undefined when using jest, but the proper class when running the server.

Does anybody know what might be the cause of this?

[Elendev]

@Birne94 hello, I've had exactly the same issue with Jest. The code is working perfectly on the browser but impossible to run the tests with Jest.

It looks like it's an import/export issue.

I've been able to make it work by importing the DocumentTitle like this:

import * as DocumentTitle from 'react-document-title';

[Kepro]

@Elendev then you will see typescript error
TS2604: JSX element type 'DocumentTitle' does not have any construct or call signatures. but will that issue that you mentioned
@gaearon any idea?

[bladedeyna]

const DocumentTitle = require('react-document-title');

works as a workaround for me, I can't get any of the import syntax methods above to work.

[Kepro]

@bladedeyna then you can use only ts-ignore... doesn't make sense to use require

[ttannis]

@Birne94 I'm having the same issue. Were you able to resolve it?

Update: The line of code posted by @Elendev worked for me. However I was initially confused as to whether or not it needed to be placed in the component file or the test file for that component. It needed to be in the component file.