substrate-frontend-template and polkadot-js incompatibility

Question

Tests are not working in substrate-frontend-template.

1. Use template: https://github.com/substrate-developer-hub/substrate-front-end-template

2. Uncomment tests in substrate-front-end/src/tests/App.js

3. See test error:

   cd substrate-front-end
   yarn install
   yarn test

   FAIL src/tests/App.js ● Test suite failed to run

    Jest encountered an unexpected token
   
    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
   

There is a note in substrate-front-end/src/tests/App.js that it's due to issue: https://github.com/polkadot-js/api/issues/3430 and there is a probably fix: https://github.com/woss/polkadot-packages-jest-typescript-setup.

The fix is working on it's own data but when I add my test it crashes:

import { cryptoWaitReady, signatureVerify } from '@polkadot/util-crypto'

beforeEach(async (): Promise<void> => {
  await cryptoWaitReady();
});

describe('util-crypto test', () => {
  it('signatureVerify', () => {
    const refereeU8 = new Uint8Array([228, 167, 81, 18, 204, 23, 38, 108, 155, 194, 90, 41, 194, 163, 58, 60, 89, 176, 227, 117, 233, 66, 197, 106, 239, 232, 113, 141, 216, 124, 78, 49,])
    const dataToSignU8 = new Uint8Array([0, 0, 0, 1, 228, 167, 81, 18, 204, 23, 38, 108, 155, 194, 90, 41, 194, 163, 58, 60, 89, 176, 227, 117, 233, 66, 197, 106, 239, 232, 113, 141, 216, 124, 78, 49, 178, 77, 57, 242, 36, 161, 83, 238, 138, 176, 187, 13, 7, 59, 100, 92, 45, 157, 163, 43, 133, 176, 199, 22, 118, 202, 133, 229, 161, 199, 255, 75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10])
    const rightSignatureU8 = new Uint8Array([96, 20, 15, 21, 11, 137, 10, 192, 129, 3, 154, 34, 203, 118, 28, 19, 176, 54, 165, 181, 227, 156, 70, 197, 73, 86, 226, 111, 137, 243, 69, 95, 41, 74, 25, 254, 228, 34, 212, 189, 141, 134, 194, 44, 229, 172, 27, 43, 67, 73, 73, 58, 61, 63, 37, 176, 120, 195, 153, 198, 46, 42, 231, 129])
    const rightSignatureU8TestingResult = signatureVerify(dataToSignU8, rightSignatureU8, refereeU8)
    expect(rightSignatureU8TestingResult).toStrictEqual(true);
  })
})

The result:

> [email protected] test /Users/adr/programming/polkadot-packages-jest-typescript-setup
> NODE_OPTIONS=--experimental-vm-modules jest --detectOpenHandles

(node:45484) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  packages/demo1/src/index.spec.ts
  ● Test suite failed to run

    Must use import to load ES Module: /Users/adr/programming/polkadot-packages-jest-typescript-setup/node_modules/@polkadot/x-bigint/shim.js

      at Runtime.requireModule (node_modules/.pnpm/[email protected]_@[email protected]/node_modules/jest-runtime/build/index.js:791:21)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.169 s
Ran all test suites.
 ELIFECYCLE  Test failed. See above for more details.

Please help me to fix the substrate-front-end-template to be able to use tests with polkadot js api.

Answer 1

I'll give a bit of history and what you can do about it. The reality is that Jest (until version 28, more on that later) has been lagging quite a bit on both ESM and export maps (introduced in Node 12). Not due to importance (especially if you look at their issue trackers), but rather that they were held ransom a tiny bit with the resolutions package from browserify.

In all honesty, this "lack of support" has been quite (to put it mildly) a major PITA for the polkadot-js libs. As you linked, there are workarounds involving the transforms, but it was still not quite working out of the box.

With Jest 27 things improved a lot, but not perfect. However with the API 8.x series and util 9.x we actually found a build workaround doing the same thing in a slightly different form and that means that all transforms could be removed. (In all the polkadot-js repos we did exactly that) Basically since this version range it works out of the box with Jest, no extra config needed.

Meanwhile in Jest-land things have also not been standing still - Jest 28 has proper export map support and now handles ESM much better as well.

I clicked through on the template and it is still on older versions of the API as well as Jest. So in this case I would recommend either one of the following -

• follow the approach woss suggested and add the exports (this is known working)
• Bump the @polkadot/* versions to latest
• Bump the jest dependencies

Since I'm always advocating for people to be relatively recent on @polkadot deps since things are moving forward and the world is not static, I would probably shoot for that option.