Error on Import when Running CreateReactApp Test

[Daniel Yuschick]

I have included Ally.js into a React/Redux/TypeScript project. Now, that I have made some good progress including it and getting it working I have hit an error when running yarn test before committing the updates. The error is as follows:

FAIL  src/containers/App/tests/index.test.tsx
 ● Test suite failed to run

   [path]/node_modules/ally.js/esm/maintain/disabled.js:21
   import nodeArray from '../util/node-array';
   ^^^^^^

   SyntaxError: Unexpected token import

     at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
     at Object.<anonymous> (src/components/RightSidebar/index.tsx:19:18)
     at Object.<anonymous> (src/components/Layout/index.tsx:6:22)

I have imported the components in from the ESM directory and added them to my types file for ActionScript.

declare module 'ally.js/esm/maintain/disabled';
declare module 'ally.js/esm/maintain/tab-focus';
declare module 'ally.js/esm/query/first-tabbable';
declare module 'ally.js/esm/when/key';

And inside my RightSidebar component I bring the components in with the following:

import AllyDisabled from 'ally.js/esm/maintain/disabled';
import AllyTabFocus from 'ally.js/esm/maintain/tab-focus';
import AllyKey from 'ally.js/esm/when/key';

Running this works fine as I've gotten the functionality to work. Only now when I run yarn test do I hit the error.

[Rodney Rehm]

Is it possible that the test runner (whichever that is?!) is not capable of handling ES6 Modules?

[Daniel Yuschick]

I am using CreateReactApp which by default supports Jest. Since CRA does support ES6 syntax, I am unsure if that is the issue here. I would also suspect it would occur in more files than just nodeArray.

I've tried a couple different workarounds but with no luck yet.

[Daniel Yuschick]

I was able to solve this issue by the following:

• I installed the 'babel-polyfill' package
• Included `import 'babel-polyfill' at the top of my entry point file for my app

I will have a blog up this week going over this process and working with Ally.js within React and Typescript.

Thanks!