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?
create-react-app
andreact-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