Jest - Cannot use import statement outside a module - using Rescript

Question

I am trying to run unit tests in a React project generated using react-scripts, in which I added ReScript support.

When I run the tests, however, I encountered an error in the transpiled javascript code.

Details of the error:

/Users/massimilianodacunzo/Projects/Elixir/test-project/apps/phoenix_react_web/assets/node_modules/bs-platform/lib/es6/array.js:3
import * as Curry from "./curry.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 |
  2 |
> 3 | import * as $$Array from "../../../node_modules/bs-platform/lib/es6/array.js";
    | ^
  4 | import * as React from "react";
  5 |
  6 | function TestComponent(Props) {

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (src/components/users/TestComponent.bs.js:3:1)

The components I am trying to test:

App.res

%%raw(`
import logo from './logo.svg';
import './App.css';
`)

@react.component
let make = () => {
    <div className="App">
        <TestComponent elements={["1", "2", "3"]} />
    </div>
}

TempComponent.res

@react.component
let make = (
    ~elements: array<string>
) => {
    <ul>
        {
            React.array(
                elements 
                |> Array.map(e => 
                    <li key={e}>{React.string(e)}</li>)
            )
        }
    </ul>
}

The generated TestComponent.bs.js

import * as $$Array from "../../../node_modules/bs-platform/lib/es6/array.js";
import * as React from "react";

function TestComponent(Props) {
  var elements = Props.elements;
  return React.createElement("ul", undefined, $$Array.map((function (e) {
                    return React.createElement("li", {
                                key: e
                              }, e);
                  }), elements));
}

var make = TestComponent;

export {
  make ,
  
}
/* react Not a pure module */

Is there any additional configuration I can add to the react-scripts test script?

This is the kind of problems you get when using generators like `create-react-app` and `react-scripts`. It's only convenient until you venture outside the tiny box it constructs for itself, and then you have to pay the actual cost, with massive interest. There might be some help to be found here though: https://github.com/glennsl/bs-jest/issues/63 — glennsl, Mar 15 '21 at 08:33

score 2 · Answer 1 · answered Mar 27 '21 at 20:56

Following the comment of glennsl, I followed the git issue, discovering that the configuration in my bsconfig.json file specified the package-specs module as es6. The test error didn't appear if I change the configuration to commonjs.

{
    ...
    "package-specs": {
      "module": "commonjs",
      "in-source": true
    }
    ...
}

Again, thanks to glennsl for pointing me in the right direction.

Jest - Cannot use import statement outside a module - using Rescript

1 Answers1