Ts-jest: Cannot destructure property `Menu` of 'undefined' or 'null'

[jimhucksly]

I using Vue +Typescript + Electron

In App.ts file:

import { Vue, Component, Watch } from 'vue-property-decorator'
import { remote } from 'electron'

const { Menu } = remote

I get this error after jest running

TypeError: Cannot destructure property "Menu" of "undefined" or "null"

[ahnpnl]

hi, would you please provide us a minimum reproducible repo ?

[jimhucksly]

hi, would you please provide us a minimum reproducible repo ?

https://github.com/jimhucksly/issues-1387-repoduce

[ahnpnl]

hi, a few things you can do to improve your project when using typescript and ts-jest:

• Make your tests file in typescript, for example App.spec.js can changed to App.spec.ts.
• Your jest config in package.json can be improved, for example:

"preset": "ts-jest",
 "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "vue"
],
"transform": {
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.js$": "babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}

• Your package.json needs 2 new dependencies ts-jest and @types/jest.
• Delete App.js.
• Your test file contains error too, it should be like this:

import { shallowMount } from '@vue/test-utils'
import App from '../src/App'

describe('App.js', () => {
  test('render App', () => {
    const wrapper = shallowMount(App)
    expect(wrapper.text()).toEqual(<something_here>)
  })
})

and regarding to your issue with electron in your App.ts, the import path isn't correct. It needs to be import remote from 'electron'.

import remote from 'electron'

const { Menu } = remote

[jimhucksly]

@ahnpnl repo updated, problem is not solved

[jimhucksly]

import like:
import remote from 'electron'
is not correct! We need imports remote as module of electron, but not the Electron itself

[ahnpnl]

what is the issue when using import remote from 'electron' ? I'm not so familiar with electron but using that way solves the issue with jest. The error you got is from typescript compiler. It can't recognize import { remote } from 'electron' therefore it throws the error.

You can reproduce the behavior of typescript compiler by doing these following steps:

• Compile App.ts to js file (I guess by running yarn build)
• Run node src/App.js and you will get the same error.

When jest and ts-jest run, the same behavior occurs, first compiling ts to js (similar to yarn build) then typescript will run check on the code (similar to node src/App.js)

[jimhucksly]

Problem is not with typescript.

[jimhucksly]

Run node src/App.js and you will get the same error.

You can't run it like this
For work of Imports we need use babel, but it doesn't start here

[ahnpnl]

you can also try to install ts-node, then run yarn ts-node src/App.ts and print out remote, you will see the result undefined. I don't know why it is undefined but something is missing which makes remote import is undefined.

and if you use syntax import remote from 'electron' gives the result
node_modules/electron/dist/Electron.app/Contents/MacOS/Electron

[jimhucksly]

Cannot read property 'dispatch' of undefined

mounted() {
    > 28 |     this.$store.dispatch(...)

Jest is wonderful

[ahnpnl]

Happy testing 😀

[gfijrb]

so what was the problem?