CODEWITHSUNDEEP
reactjstypescriptjestjscreate-react-app
Shane Creighton-Young
Shane Creighton-Young

Reputation: 1186

All imports are undefined for one module during Jest test run

Strange bug with Jest, create-react-app, and typescript.

Tonight Jest started failing to import my "./ProcessStore" module correctly. This module is a transitive dependency of something that my tests import.

The error I see is that the thing I import is undefined.

When I do import * as what from "./ProcessStore" and log(what), it prints all of the exports, but the values are undefined. Like {default: undefined, ResourceChange: undefined} two classes that are exported. It should be {default: <a class>, ResourceChange: <a class>}.

It's just that one file. Every other file works.

When I use npm start, it works --- this is a Jest only problem.

Also if I rename the broken file to say ./ProcessStore2, it also works.

I tried ./node_modules/jest --clearCache, which didn't help.

In case it's relevant, I'm using craco normally. Switching back to react-scripts temporarily didn't help.

I'm using react-scripts 4.0.3 (latest version).

What is going on? How do I fix this silly problem?

Upvotes: 17

Views: 12765

Answers (6)

Vyacheslav Lomov
Vyacheslav Lomov

Reputation: 1

In my case I also had no circular dependencies and simply rename files didn't affect that. So I added new export from my package with only needed modules.

  "exports": {
".": {
  "types": "./dist/index.d.ts",
  "default": "./dist/index.js"
},
"./mocks/": {
  "types": "./dist/types/classes/__mocks__/services/mocks.d.ts",
  "default": "./dist/mocks.js"
},
"./package.json": "./package.json"},
  "typesVersions": {
"*": {
  ".": [
    "dist/index.d.ts"
  ],
  "mocks": [
    "dist/types/classes/__mocks__/services/mocks.d.ts"
  ]
}}

Upvotes: 0

Murphpdx
Murphpdx

Reputation: 122

For me, it was a combination of the IDE being unable to map variable names, and I was passing the wrong argument.

https://intellij-support.jetbrains.com/hc/en-us/community/posts/7960564407442-When-debugging-with-jest-values-are-displayed-as-undefined-while-they-have-values

Upvotes: 0

Maxim Krabov
Maxim Krabov

Reputation: 715

I had a case when I had no circular dependencies, but imports still were undefined in a lib in a small monorepo. It sounds weird, but using shorter filenames resolved the issue.

Upvotes: 0

helsont
helsont

Reputation: 4962

I also ran into this issue, due to a circular dependency.

In order to confirm the nature of the bug, I console.log the missing import and executed my test. I could see that the import was in fact undefined when it shouldn't have been.

I ran this command to find circular dependencies at package/project level:

npx madge --circular --extensions ts,tsx .

This only gave me a clue as to what was going on, however.

I then used the debugger at the point where my circular dependency was occurring. Using Chrome DevTools, I inspected the call stack, and found how each import was being imported. This revealed the circular dependency very clearly. For me, this was the most important part of untangling the circular dependency.

Upvotes: 11

Mark Swardstrom
Mark Swardstrom

Reputation: 18130

I ran into this when I was importing in one file like this

import { myHook } from 'services/hooks/myHook'

and in another file

import { myHook } from 'services/hooks'

There was an index file

// src/services/hooks/index.ts
export * from './myHook.ts'

Converting them all to use the index path fixed it. I don't think I had a circular dependency anywhere, I never was able to truly understand what was wrong.

Upvotes: 5

Shane Creighton-Young
Shane Creighton-Young

Reputation: 1186

This was caused by a circular dependency in my project.

The circular dependency was causing Jest to return an empty module. I believe the 2nd time a module is entered, it will have undefined contents.

In my case the chain was ProcessStore.ts -> stores.ts -> ProcessStore.ts. So by the time stores.ts loads ProcessStore.ts, the process store has already been loaded, so everything is undefined.

Upvotes: 25

Related Questions