Jest has problems with the IIFE module of dist/capacitor.js

[WoMayr]

Description of the problem:
Testing a compontent or service that uses a Plugin with Jest fails with following message:

 ● Test suite failed to run

    TypeError: Cannot read property 'App' of undefined

      22 | import { StorageSelectors } from "../store/storage.selectors";
      23 | 
    > 24 | const { App, Device, Browser } = Plugins;
         |         ^
      25 | 
      26 | @Injectable({
      27 |     providedIn: "root"

Affected platform

• Android
• iOS
• electron
• web
• testing with jest

OS of the development machine

• Windows
• macOS
• linux

Other information:
I am using a NX workspace.
Versions:

• @nrwl/schematics: 7.8.6
• jest: 24.8.0
• jest-preset-angular: 7.1.1

As mentioned in issue ionic-team/stencil#1234 the problem seems to be that the capacitor.js module (the IIFE module in the dist folder) doesn't export anything. (module.exports never gets written)

Capacitor version: 1.0.0-beta.25

node version: 6.8.0

npm version: 10.15.1

CocoaPods version: N/A

Steps to reproduce:

1. Run npx create-nx-workspace capacitor-reproduce
   • SCSS
   • some npm scope
   • an empty workspace
2. Run cd capacitor-reproduce\
3. Run npm install --save @capacitor/core @capacitor/cli
4. Run npx cap init
   • App
   • com.example.app
   • npm
5. Run ng g application example
   • Angular
   • default folder (just press enter)
   • Jest
   • Protractor
   • app
6. Edit the file apps/example/src/app/app.component.ts
   a. Add import { Plugins } from '@capacitor/core' and const { Device } = Plugins;
7. Run ng test
   • The before mentioned error happens here

Link to sample project: https://github.com/WoMayr/reproduce-jest-capacitor

[jcesarmobile]

@simonhaenisch you were using jest successfully, right?
If so, can you give a hand here?

[simonhaenisch]

I suggested in the other issue (which is still on the Stencil repo), to try adding a file __mocks__/@capacitor/core.ts with the following content:

export const Plugins = {};

to mock it out.

[jcesarmobile]

ah, sorry, didn't notice you already answered there, thanks!

[WoMayr]

@simonhaenisch Thanks for the help! This did the trick!

[simonhaenisch]

@jcesarmobile the mock is a way to get around it, however I think there's still some issue with capacitor and commonjs, because I don't think that mock should be necessary... it also just makes the tests pass because the object destructuring from Plugins doesn't throw an error anymore, but if you had a test that actually tried using one of the Plugins, it would fail (unless that plugin would be provided in the mock).

I think the proper fix would be to make sure it exports properly for cjs, because then the proxy would be working when accessing plugins. But I'm not so experienced with this, maybe Manu can help.

[WoMayr]

If I understood the rollup config correctly, @capacitor/core only gets compiled for IIFE which is not a CommonJS format and not usable in NodeJS applications (like Jest). An alternative would be to bundle capacitor as an UMD module which works with Jest (I tested this with the current master) and should theoretically also work in a browser. (http://rollupjs.org/guide/en/#output-format)

[adamdbradley]

Made a few updates so browser/esm/cjs all work, which should allow Jest to pull in the cjs format: 814db1f

Biggest change is the various entry points bundlers would check first:

capacitor/core/package.json

Lines 23 to 26 in 814db1f

	"main": "dist/index.js",
	"module": "dist/esm/index.js",
	"browser": "dist/capacitor.js",
	"unpkg": "dist/capacitor.js",

“main” is what node/jest would use, and is in the commonjs format (which we didn’t have), "module" is esm for modern node and bundling, and browser/unpkg would be what bundlers would use for a browser build.

@simonhaenisch would you be able to double check this and make sure it's the right solution and jest/browser/webpack all find the correct formats? Thanks

[simonhaenisch]

Thanks @adamdbradley I'll give it a try later today tomorrow soon 😬!

[simonhaenisch]

@adamdbradley yup, seems to work fine! At least it still builds and all our tests pass (without the mock) (:

[jcesarmobile]

thanks for testing, closing then.

[simonhaenisch]

@jcesarmobile this hasn't actually been merged yet... I just opened a PR (#1575) because Adam didn't do it yet.

Thanks!

[jcesarmobile]

Oops, I thought I saw the commits, too much activity in the latest few days.

[speyou]

For anyone finding this issue not resolved, I managed to fix the problem locally with the following lines:

jest.config.js

  moduleNameMapper: {
    "@capacitor/core": "<rootDir>../../node_modules/@capacitor/core/dist/esm/index.js",

<rootDir>../../node_modules/ is because I run the same Jest config for a bunch of monorepository packages. You might need to edit to
"@capacitor/core": "node_modules/@capacitor/core/dist/esm/index.js",

[jcesarmobile]

It was fixed after the final release, so should be good on next release.