how to resolve error when launching mocha and require ES6 modules with babel7 in a react project

Viewed 398

--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

0 Answers
Related