1

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?

1
  • 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: github.com/glennsl/bs-jest/issues/63
    – glennsl
    Commented Mar 15, 2021 at 8:33

1 Answer 1

2

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.