Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't use v8 in Jest unit tests

See original GitHub issue

I am using TypeScript, Jest and Webpack in my project. I upgraded to v8 and now I can’t use react-waypoint in my unit tests anymore.

With v7 I imported this library with

import * as Waypoint from 'react-waypoint';

Now with v8 I have to import it like

import Waypoint from 'react-waypoint';

With that default import it runs with TypeScript and Webpack as expected but not in my unit tests that run with Jest. If I change the import to the v7 import * as Waypoint syntax TypeScript and Webpack fails, but Jest runs fine.

I believe it has something to do how this library is exported in the package because in Jest I transpile everything to CommonJS (because Node only understands CommonJS) but then there is a .default import which doesn’t exist. In Webpack I transpile everything to ESM import syntax and TypeScript take the default export and Webpack can handle that.

My Workaround at the moment is to use v7 instead of v8 because there everything works out of the box.

Maybe this is related to #238? 🤔

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

screendrivercommented, Mar 7, 2018

It sounds to me like this issue stems from however your project is set up

Not really. We don’t have any technical issues. We just dropped support for default exports because they can be difficult to maintain, refactor and their semantic could change without knowing it. Furthermore you don’t know what you really import. For example import foo from 'mylib' compared to import { calculateDistance } from 'mylib'. And we are not alone with this opinion 😉

But this has nothing to do with this issue. When I import react-waypoint 8.0.1 in my TypeScript project like that

import Waypoint from 'react-waypoint';


It gives me the component when I bundle everything with webpack but undefined when I run my unit tests with Jest.

After a little bit debugging I believe I found out what’s going on: in your package.json you have

"main": "cjs/index.js",
"module": "es/index.js",

defined. That’s cool. Webpack respects that and uses es/index.js. The TypeScript definition is also for the ESM file. Now when I run my tests with Jest, Jest uses cjs/index.js instead of es/index.js. What now happens is that TypeScript adds a .default:


import Waypoint from 'react-waypoint';

gets transpiled to

"use strict";
exports.__esModule = true;
var react_waypoint_1 = require("react-waypoint");

But there is no .default. If you had named exports it would look like this:

import * as Waypoint from 'react-waypoint';

gets transpiled to

"use strict";
exports.__esModule = true;
var Waypoint = require("react-waypoint");

and then it should work. I also found some issues / PR’s in the Jest repository like this or that

So I found the problem but don’t have a solution 😁 Except “change your default export to a named export” or “only use CommonJS for your package”.

andrew-mecommented, Apr 20, 2018

Thanks for the explanation.

I got around this by creating a jest mock of waypoint that exports default.

So in __mocks__ I created a file react-waypoint.js with

const Waypoint = require("react-waypoint");

exports.default = Waypoint;

Bit dirty, but does the job for now

Read more comments on GitHub >

github_iconTop Results From Across the Web

Configuring Jest
A global setup module configured in a project (using multi-project runner) will be triggered only when you run at least one test from...
Read more >
SyntaxError: Cannot use import statement outside a module ...
This is a React, Typescript, Webpack project. I am trying to test a module. But Jest won't transform the module to plain javascript...
Read more >
Jest | WebStorm Documentation - JetBrains
You can run and debug tests with Jest right in WebStorm. ... Otherwise, by default the debug process will use V8 Debugging Protocol....
Read more >
Testing | Next.js
Jest and React Testing Library are frequently used together for Unit Testing. There are three ways you can start using Jest within your...
Read more >
Testing the Legacy: Getting Scripts Tested with Jest in Node
RequireJS can't get them out of this jam. The thought of script injections around every test case makes them cringe. Luckily, the V8...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found