Testing with bs-jest is a common topic here. I use bs-jest to test Ratoon’s marketing portal. This week, I upgraded from bs-platform 8 to rescript 9.1.4, Next.js 11.1.2 and React 17.0.2. I also switched from commonJS to ES6 Mostly the upgrade went smoothly, but I had problems with tests. Initially, these were the usual problems I have read about here. I resolved all of these by updating the jest config to match files with the ‘.mjs’ extension. I also added rules to transform these and specific node_module subfolders including @glennsl/bs-jest, @testing-library/react, bs-dom-testing-library and rescript. Still, tests failed with the error message:
TypeError: React.createElement is not a function
This was coming from Rescript 9 generated JavaScript. I did several checks to ensure I was not using mis-matched versions of react, jest, rescript, … I reread the ES2015 module specification and tried porting @reascriptbr/react-testing-library to Rescript 9 and ES6 modules. I had the same problem every time.
Finally, I tried modifying the generated code. I found that if I changed the generated
import * as React from “react”;
to
import React from “react”;
or
import {default as React" from "react";
all the tests pass.
I’m not sure if this is an issue with babel-jest or the Rescript code generator. When using Rescript to generate commonJS, the generator emits
var React = require("react");
implying to me that JavaScript will treat the React variable as an object rather than the namespace that is implied by
import * as React from "react";
Has anyone else run into this situation. Alternatively, do any of the maintainers have recommendations for react-testing. I have seen Dusty Philip’s blog on Zora testing. Is Zora preferred over Jest?
Below is configuration I borrowed from @rescriptbr/react-testing-library to simplify and explore. If there is interest, I’ll set up a playground.
bsconfig.json
Blockquote
{
“name”: “bs-react-testing-library”,
“bsc-flags”: ["-bs-no-version-header", “-bs-super-errors”],
“warnings”: {
“number”: “+A-48-42-103”,
“error”: “+A-3-44-10”
},
“reason”: {
“react-jsx”: 3
},
“refmt”: 3,
“package-specs”: {
“module”: “es6”,
“in-source”: true
},
“suffix”: “mjs”,
“bs-dependencies”: [“bs-dom-testing-library”, “@rescript/react”],
“bs-dev-dependencies”: ["@glennsl/bs-jest"],
“sources”: [
{
“dir”: “src”,
“subdirs”: [
{
“dir”: “tests”,
“type”: “dev”
}
]
}
]
}
block quote
package.json
block quote
{
“name”: “@rescriptbr/testing-library”,
“version”: “1.0.0”,
“description”: “ReScript bindings for react-testing-library”,
“repository”: “rescriptbr/react-testing-library”,
“author”: {
“name”: “ReScript Brasil”,
“email”: “vmarcosp.pereira@gmail.com”
},
“license”: “MIT”,
“files”: [
“src/.res",
"src/.resi”,
“bsconfig.json”
],
“scripts”: {
“build”: “rescript build”,
“clean”: “run-p clean:*”,
“clean:bsb”: “rescript clean”,
“jest”: “jest”,
“pretest”: “yarn build”,
“test”: “yarn jest”
},
“keywords”: [
“rescript-react”,
“rescript-react-testing-library”
],
“devDependencies”: {
“@babel/core”: “^7.15.5”,
“@babel/node”: “^7.15.4”,
“@babel/preset-env”: “^7.15.6”,
“@babel/preset-react”: “^7.14.5”,
“@glennsl/bs-jest”: “^0.7.0”,
“@rescript/react”: “^0.10.3”,
“@sheerun/mutationobserver-shim”: “^0.3.3”,
“@testing-library/react”: “^12.1.1”,
“babel-jest”: “^27.2.4”,
“bs-dom-testing-library”: “^0.7.0”,
“jest”: “^27.2.4”,
“npm-run-all”: “^4.1.5”,
“rescript”: “^9.1.4”
},
“dependencies”: {
“next”: “^11.1.2”,
“react”: “17.0.2”,
“react-dom”: “17.0.2”
}
}
blockquote
babel.config.js
module.exports = {
“presets”: [
“next/babel”
],
“plugins”: [ ]
}
blockquote
and jest.config.js
blockquote
module.exports = {
clearMocks: true,
moduleFileExtensions: [
“js”,
“mjs”,
],
setupFilesAfterEnv: [
“./setupTests.js”
],
testEnvironment: “jsdom”,
testMatch: [
“/tests//.mjs",
"/tests//.bs.js”,
],
transform: {
“^.+.m?js$”: “babel-jest”,
},
transformation
transformIgnorePatterns: [
“node_modules/(?!(@glennsl/bs-jest|@testing-library/react|bs-dom-testing-library|rescript)/)”
],
verbose: true,
};
block quote