"npm test" does not work with [email protected] + react-app-rewired

[pablomolnar]

npm test throws errors in brand new CRA2.0 app (facebook/create-react-app#3815)

Steps to reproduce

1) Create [email protected] app with react-app-rewired

cd /tmp
npx create-react-app@next --scripts-version=2.0.0-next.66cc7a90 my-react-app
cd my-react-app
npm install
npm install react-app-rewired --save-dev

2) Create a config-overrides.js file in the root directory

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

3) 'Flip' the existing calls to react-scripts in npm scripts

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}

4) Run npm test

Expected

test ran successfully

Current behaviour

> [email protected] test /private/tmp/my-react-app
> react-app-rewired test --env=jsdom

/private/tmp/my-react-app/node_modules/react-scripts/scripts/utils/createJestConfig.js:35
    roots: srcRoots.map(toRelRootDir),
                    ^

TypeError: srcRoots.map is not a function
    at module.exports (/private/tmp/my-react-app/node_modules/react-scripts/scripts/utils/createJestConfig.js:35:21)
    at Object.<anonymous> (/private/tmp/my-react-app/node_modules/react-app-rewired/scripts/test.js:16:16)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Function.Module.runMain (module.js:703:10)
    at startup (bootstrap_node.js:193:16)
    at bootstrap_node.js:660:3
npm ERR! Test failed.  See above for more details.

[patroza]

Same issue here, we also had to remove the babelTransform as it refers to babel6, while cra 2.0 is on 7.

[Guria]

Yeah. I am not sure if worth to make efforts to support cra2 until webpack4 support merged

[patroza]

@Guria so far it seems the only required changes are the paths fix, and upgrading the babelTransform/package.json to use CRA 2.0 matching babel versions.
webpack4 would be additional work, but getting the above supported would be superb already.

[lflpowell]

👍

[lflpowell]

The paths issue is fixed in the @next branch, however the error seems to be thrown from using the babel-preset-react-app in the babelTransform.js file. I'm not fully familiar with the internals of Babel/Webpack, but I have only one version of this package installed in my project and that's the one used by react-scripts 2.0.

Changing rewireJestConfig.js to point to react-scripts 2.0 version of babelTransform.js file does not trigger this error, even though both files are almost identical.

I was hoping to be able to provide a fix for this but am a little stumped.

[timarney]

@Guria FYI webpack 4

facebook/create-react-app@d1454fe

https://twitter.com/dan_abramov/status/998258353255088128

[mnemanja]

I can confirm the behavior.
My react-scripts is on version 2.0.0-next.66cc7a90 and react-app-rewired on 2.0.0. When running the tests locally everything runs correctly, but when running it on Jenkins I get errors like this:

FAIL src/components/containers/units/UnitItem/unitItemActions.test.js
  ● Test suite failed to run

    Cannot find module 'babel-preset-react-app'
      
      at Object.<anonymous> (node_modules/react-app-rewired/scripts/utils/babelTransform.js:14:21)

Any suggestions on how to get rid of this blocking issue?

[timarney]

Just noting this:
facebook/create-react-app#4511

[sowhatdoido]

I tried installing react-app-rewired ^1.6.2 and react-scripts 2.0.0-next.a671462c, then manually performing the update found in #243, and everything seems to work fine

[timarney]

Moving forward maybe:
https://github.com/arackaf/customize-cra

[nateshmbhat]

My error got fixed for doing the following .

Here's the fix :

My problem was of older babel version fixed easily by installing :

npm i @babel/plugin-proposal-class-properties @babel/preset-react @babel/preset-env @babel/core @babel/plugin-transform-runtime --save-dev

In .babelrc file :

{
   "presets": [
       "@babel/react" , 
       "@babel/env" , 
   ],
   "plugins": [
       "@babel/plugin-proposal-class-properties"
   ]
}

Now babel built it successfully after this.