--EDIT-- found solution: use not mocha but JEST+ENZYME USE_JEST =>IN_FUNCTIONNAL_REACT ;) --EDIT--
I spend all my day on internet to find this solution. I found many, tried a lot, but even when I am able to get out of this error, I can not use react tags in the code. Description: My objective is to use mocha/chai to test my react components builded in babel7. But nothing works... and let me think that I didn't do well... my project structure:
.
├── package.json
├── src
│ ├── client
│ │ ├── App.js
│ │ ├── components
│ │ │ ├── Home
│ │ │ │ └...
│ │ │ ├── Tetris
│ │ │ │ ├── Card.js
│ │ │ │ └...
│ │ │ └── styles
│ │ │ ├── StyledAlert.js
│ │ │ └...
│ │ ├── hooks
│ │ │ └...
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ ├── middlewares
│ │ │ └...
│ │ └── redux
│ │ └...
│ └── server
│ └...
├── test
│ └── client
│ ├── Test.js
│ ├── dom.js
│ ├── fake.spec.js
│ └── helpers.js
├── webpack.common.cjs
├── webpack.dev.cjs
└── webpack.prod.cjs
piece of package.json
{
"type": "module",
"scripts": {
"test:unit": "./node_modules/.bin/mocha --require @babel/register --require ./test/client/helpers.js --require test/client/dom.js --require ignore-styles 'test/**/*.spec.js'",
},
"dependencies": {
"@babel/polyfill": "^7.8.7",
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/node": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/register": "^7.9.0",
"@types/react": "^16.9.35",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"chai": "^4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"mocha": "^7.1.2",
}
}
test/fake.spec.js => found HERE
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import { expect } from 'chai';
import jsdom from 'mocha-jsdom';
import App from './Test';
global.document = jsdom({
url: 'http://localhost:3000/',
});
let rootContainer;
beforeEach(() => {
rootContainer = document.createElement("div");
document.body.appendChild(rootContainer);
});
afterEach(() => {
document.body.removeChild(rootContainer);
rootContainer = null;
});
describe('App Component Testing', () => {
it('Renders Hello World Title', () => {
act(() => {
ReactDOM.render(<App />, rootContainer);
});
const h1 = rootContainer.querySelector('h1');
expect(h1.textContent).to.equal('Hello World');
});
});
Test.js
import React from 'react';
const App = () => <h1>Hello World</h1>;
export default App;
I tryed many things to dodge this error when launching npm run test:unit:
✖ ERROR: Must use import to load ES Module: /Users/jojomoon/Documents/PROJECTS_REPO/RedTetris/test/client/helpers.js
require() of ES modules is not supported.
require() of /Users/jojomoon/Documents/PROJECTS_REPO/RedTetris/test/client/helpers.js from /Users/jojomoon/Documents/PROJECTS_REPO/RedTetris/node_modules/mocha/lib/cli/run-helpers.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename helpers.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/jojomoon/Documents/PROJECTS_REPO/RedTetris/package.json.
And when I was able to dodge it, the react tag is not recognised.
And when I tried the tutorial on a new project and have this error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
So. I'm lost, please help me