Can't seem to test with React 16, Jest, Enzyme 3.3

[kamranayub]

I've made a reproduction here; the IdleTimer works in the app but does not work when mounted during a test:

https://codesandbox.io/s/6vzxx83r0z

I get the error:

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

Check the render method of `WrapperComponent`.

I'm specifically using the same enzyme and enzyme-adapter-react-16 versions listed in the package.json.

[SupremeTechnopriest]

Hi @kamranayub, this error is not caused by IdleTImer. It's because you are not exporting your app component and the test suite cant find it. Ive updated your example here.

[SupremeTechnopriest]

Also, I would probably use IdleTimer as a standalone component and not as a wrapper component. <IdleTImer /> vs <IdleTimer>{{some content}}</IdleTimer>. This way your app state is separate from IdleTimer state.

[kamranayub]

Oops, sorry, bad repro. I still get the issue locally with everything exported but let me try and reproduce that.

…

On Mon, Aug 27, 2018, 11:43 Randy Lebeau ***@***.***> wrote: Also, I would probably use IdleTime as a standalone component and not as a wrapper component. <IdleTImer /> vs <IdleTimer>{{some content}}</IdleTimer>. This way your app state is separate from idle time state. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiaa6s_s2HCPs24Q0JCppjaz1iSrOI-ks5uVCGqgaJpZM4WOEeE> .

[kamranayub]

Ah hah! I figured it out. It was due to how react-idle-timer is exported as a module and how I described it in TypeScript.

This declaration file works as expected:

declare module "react-idle-timer" {
  import * as React from "react";

  class IdleTimer extends React.Component<IdleTimerProps> {
    /**
     * Restore initial state and restart timer
     */
    reset(): void;

    /**
     * Store remaining time and stop timer
     */
    pause(): void;

    /**
     * Resumes a paused timer
     */
    resume(): void;

    /**
     * Time remaining before idle (number of ms)
     */
    getRemainingTime(): number;

    /**
     * How much time has elapsed (timestamp)
     */
    getElapsedTime(): number;

    /**
     * Last time the user was active
     */
    getLastActiveTime(): number;

    /**
     * Returns wether or not the user is idle
     */
    isIdle(): boolean;
  }

  namespace IdleTimer {

  }

  interface IdleTimerProps {
    ref: (ref: IdleTimer) => any;

    /**
     * Activity Timeout in milliseconds default: 1200000
     */
    timeout?: number;

    /**
     * DOM events to listen to default: see [default events](https://github.com/SupremeTechnopriest/react-idle-timer#default-events)
     */
    events?: string[];

    /**
     * Element reference to bind activity listeners to default: document
     */
    element?: Node;

    /**
     * Start the timer on mount default: true
     */
    startOnMount?: boolean;

    /**
     * Bind events passively default: true
     */
    passive?: boolean;

    /**
     * Capture events default: true
     */
    capture?: boolean;

    /**
     * Function to call when user becomes active
     */
    onActive?: () => void;

    /**
     * Function to call when user is idle
     */
    onIdle?: () => void;
  }

  export = IdleTimer;
}

I may try to contribute a @types package for this.

[SupremeTechnopriest]

@kamranayub Please do! That would be great!

[kamranayub]

OK, this was actually a little more involved.

I was having the issue I originally posted above in my CRA TS project when running Jest tests. I had no problems using the component in my application at runtime, though.

My tsconfig.test.json file has a different module format than the main application, due to some issues with react-scripts-ts:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

For whatever reason, this module type causes a problem when trying to use the following import syntax:

import IdleTimer from "react-idle-timer";

While this works at runtime (webpack can import it properly), Jest cannot handle this and throws the error above (it's basically undefined).

The import has to look like this when running through tests:

import * as IdleTimer from "react-idle-timer";

This will work with the Jest tests.

So to handle both working at runtime and working during tests, I introduced a component prop on my wrapper component that uses whatever instance is passed so I can override it during tests. Super hacky but short of redoing how this package gets bundled, I don't know what to do to fix it.

These are the TS definitions I eventually ended up with:

declare module "react-idle-timer" {
  import * as React from "react";

  class IdleTimer extends React.Component<IdleTimerProps> {
    /**
     * Restore initial state and restart timer
     */
    reset(): void;

    /**
     * Store remaining time and stop timer
     */
    pause(): void;

    /**
     * Resumes a paused timer
     */
    resume(): void;

    /**
     * Time remaining before idle (number of ms)
     */
    getRemainingTime(): number;

    /**
     * How much time has elapsed (timestamp)
     */
    getElapsedTime(): number;

    /**
     * Last time the user was active
     */
    getLastActiveTime(): number;

    /**
     * Returns wether or not the user is idle
     */
    isIdle(): boolean;
  }

  export interface IdleTimerProps {
    ref: (ref: IdleTimer) => any;

    /**
     * Activity Timeout in milliseconds default: 1200000
     */
    timeout?: number;

    /**
     * DOM events to listen to default: see [default events](https://github.com/SupremeTechnopriest/react-idle-timer#default-events)
     */
    events?: string[];

    /**
     * Element reference to bind activity listeners to default: document
     */
    element?: Node;

    /**
     * Start the timer on mount default: true
     */
    startOnMount?: boolean;

    /**
     * Bind events passively default: true
     */
    passive?: boolean;

    /**
     * Capture events default: true
     */
    capture?: boolean;

    /**
     * Function to call when user becomes active
     */
    onActive?: () => void;

    /**
     * Function to call when user is idle
     */
    onIdle?: () => void;
  }

  export default IdleTimer;
}

The weird part is I can't repro this exactly in CodeSandbox. It apparently works in tests and at runtime with import * as IdleTimer syntax.

https://codesandbox.io/s/n0y232k4p0

🤷‍♂️

[SupremeTechnopriest]

Sounds like it's the way default exports are handled by typescript? I'm not too familiar with ts. I like it in concept but haven't really done anything with it. I see that react has the same style of import import * as React from "react"; where usually you can just import React from 'react'?

Glad you got something working... but not sure theres anything I can do on my end to help you clean it up. If it helps, I use Rollup to build the component. The main export is a cjs module and the module export is an es module. See here.

[kamranayub]

I saw that. I'd need to do more digging but I wonder if it depends on what's consuming the entry point, at runtime it's webpack and at test time it's ts-jest and I wonder if that CJS vs. ES entry point could be causing issues with my configuration. I'd need to reproduce locally on my PC with a vanilla CRA TS app to pin it down.

…

On Mon, Aug 27, 2018, 15:50 Randy Lebeau ***@***.***> wrote: Sounds like it's the way default exports are handled by typescript? I'm not too familiar with ts. I like it in concept but haven't really done anything with it. I see that react has the same style of import import * as React from "react"; where usually you can just import React from 'react'? Glad you got something working... but not sure theres anything I can do on my end to help you clean it up. If it helps, I use Rollup to build the component. The main export is a cjs module and the module export is an es module. See here <https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/package.json#L5-L6> . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiaa2lLF5kEJEsOjP7OHYf3MuLM7SO5ks5uVFungaJpZM4WOEeE> .

[MQuy]

I had the same problem. It seems that typescript cannot pick module in package.json but webpack can.
You can check details here: microsoft/TypeScript#21423
I wonder that can we disable module in our package.json temporarity? @SupremeTechnopriest

[paigeflourin]

Hi @kamranayub ,

would happen to explain to me how to implement this? sorry i am new to this but i am creating an SPFX app and i need to check a user's idle time. i have forked your codesandbox and tried to implement the example in the readme but i can't make it work.

https://codesandbox.io/s/n0y232k4p0