Jest: TypeError: Cannot read property 'default' of undefined
Vue CLI bundles Jest as its default test runner. All is fine and good until one day, running your unit tests you get the following trace:
TypeError: Cannot read property 'default' of undefined at Object.get [as TextInput] (src/components/IO/index.ts) at src/components/dataTable/Editor.vue at [lots of omitted frames] at Object.<anonymous> (src/store/index.spec.ts)
Even though the project builds just fine in both development and production mode.
This usually stems from cyclic dependencies. At my best guess, it seems Jest has some arbitrary memory limit and it runs out at some point, because the breaking code isn’t directly related to any recent changes in the codebase. Adding one import in one barrel will cause another one somewhere down the line to run out of Jest’s manageable size and you’ll get a fun afternoon of debugging.
To debug this issue, start from the bottom of the stack trace. The top of the trace is simply the symptom, the cause is usually somewhere down at the bottom.
If you’re using ESLint, turn on
'import/no-cycle': 'error'. Modern bundlers are great at figuring cycles out, but Jest doesn’t always seem to be happy with the result. This linter rule will help you find cycles quickly.
Working from the bottom up, resolve your cycles one by one based on the stack trace you got above. Eventually, you’ll hopefully find that your tests run again happily ever after.