npm test - You should not use <Route> or withRouter() outside a <Router>

[francisrod01]

I'd try to run test jests in this project but I fail:

FAIL  src/__tests__/App.test.js
  ● Test suite failed to run

    ReferenceError: [BABEL] /home/paneladm/projects/website/src/setupTests.js: Unknown option: base.configFile. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options.

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.744s
Ran all test suites related to changed files.

[francisrod01]

I found the solution:

Unknown option: base.configFile error when running tests
facebook/create-react-app#5259 (comment)

[francisrod01]

But now we have other problem related Route outside <Router>.

 FAIL  src/__tests__/App.test.js
  ✕ renders without crashing (40ms)

  ● renders without crashing

    Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

       6 | it('renders without crashing', () => {
       7 |   const div = document.createElement('div');
    >  8 |   ReactDOM.render(<App />, div);
         |            ^
       9 |   ReactDOM.unmountComponentAtNode(div);
      10 | });
      11 | 

console.error node_modules/react-dom/cjs/react-dom.development.js:14550
    The above error occurred in the <Route> component:
        in Route (created by withRouter(Connect(App)))
        in withRouter(Connect(App)) (at App.test.js:8)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.466s
Ran all test suites related to changed files.

[francisrod01]

I think this solution works on this project as works on my custom project as well.

Create a babel.config.js file in the project's path and then:

module.exports = function(api) {
  api.cache(true);

  const ignore = [/\/(build|node_modules)\//];
  const presets = [["@babel/env"], ["@babel/react"]];
  const plugins = [
    // allow us to use import rather than require
    "@babel/plugin-syntax-dynamic-import",
    "dynamic-import-node",
    // is for code splitting
    "react-loadable/babel",
    // Support for the experimental syntax 'classProperties' isn't currently enabled
    "@babel/plugin-proposal-class-properties"
  ];

  return {
    ignore,
    presets,
    plugins
  };
};