React-redux-starter-kit: Tests fail on fresh checkout because of PhantomJS (OSX)

[cimi]

After a fresh checkout and npm install on the repo I can't seem to be able to run the tests for the project. Here's what I did:

➜  react-redux-starter-kit git:(master) git st
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working directory clean
➜  react-redux-starter-kit git:(master) npm test
> [email protected] test /Users/ciminian/code/acme/src/react-redux-starter-kit
> better-npm-run test

running better-npm-run in /Users/ciminian/code/acme/src/react-redux-starter-kit
Executing script: test

to be executed: babel-node ./node_modules/karma/bin/karma start build/karma.conf
  app:config Create configuration. +0ms
  app:config Apply environment overrides for NODE_ENV "test". +2ms
  app:config No configuration overrides found for NODE_ENV "test" +1ms
  app:webpack:config Create configuration. +1s
  app:webpack:config Apply ExtractTextPlugin to CSS loaders. +6ms
  app:karma Create configuration. +1ms

[...]

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 37:16-39
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  520 kB       0
    chunk    {0} index.html 503 kB
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 759 bytes {0} [built]
        [1] ./~/html-webpack-plugin/~/lodash/lodash.js 502 kB {0} [built]
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.54 kB [rendered]
        [0] ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/views/HomeView/HomeView.scss 1.03 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 22.1 kB [rendered]
        [0] ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/styles/core.scss 20.6 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
11 04 2016 19:33:26.780:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
11 04 2016 19:33:26.795:INFO [launcher]: Starting browser PhantomJS
11 04 2016 19:33:28.230:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket /#Rl_kDnqON28XgtRhAAAA with id 48381918
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  SyntaxError: Parse error
  at /Users/ciminian/code/acme/src/react-redux-starter-kit/tests/test-bundler.js:55 <- webpack:///tests/test-bundler.js:6:0

Finished in 0.197 secs / 0 secs

SUMMARY:
✔ 0 tests completed
npm ERR! Test failed.  See above for more details.

I don't really know what's wrong here, as I'm fairly noob-ish to the stack. Any help is appreciated.

Thanks for this project - it's was really helpful for me to get started with react/redux!

[cimi]

Here are some more details from my environment:

➜  react-redux-starter-kit git:(master) node -v
v4.2.2
➜  react-redux-starter-kit git:(master) npm -v
3.3.6
➜  react-redux-starter-kit git:(master) phantomjs -v
1.9.8

➜  react-redux-starter-kit git:(master) which phantomJS
/usr/local/bin/phantomJS
➜  react-redux-starter-kit git:(master) ls -l /usr/local/bin/PhantomJS
/usr/local/bin/PhantomJS -> ../lib/node_modules/phantomjs/bin/phantomjs
➜  react-redux-starter-kit git:(master) npm uninstall -g phantomjs
[SUCCESS]
➜  react-redux-starter-kit git:(master) ✗ which PhantomJS
PhantomJS not found

I saw that the recommended method of installation on the PhantomJS website was downloading a binary so I removed my global module. The tests still run (using PhantomJS 2.1.1 now, don't know where that's coming from as there doesn't seem to be anything related in the project dependencies, "phantomjs-prebuilt": "^2.1.3", doh!) and they still fail.

My project fails with the same error and the 'vanilla' one (without changes) fails with timeout:

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 37:16-39
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  520 kB       0
    chunk    {0} index.html 503 kB
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 759 bytes {0} [built]
        [1] ./~/html-webpack-plugin/~/lodash/lodash.js 502 kB {0} [built]
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.54 kB [rendered]
        [0] ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/views/HomeView/HomeView.scss 1.03 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 22.1 kB [rendered]
        [0] ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/styles/core.scss 20.6 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
11 04 2016 20:54:14.373:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
11 04 2016 20:54:14.384:INFO [launcher]: Starting browser PhantomJS
11 04 2016 20:55:14.389:WARN [launcher]: PhantomJS have not captured in 60000 ms, killing.
11 04 2016 20:55:16.397:WARN [launcher]: PhantomJS was not killed in 2000 ms, sending SIGKILL.
11 04 2016 20:55:18.404:WARN [launcher]: PhantomJS was not killed by SIGKILL in 2000 ms, continuing.

Finished in 0 secs / 0 secs

[cimi]

Ok, I've just entered the cornfields. My project runs its tests, but _only_ if I change karma.conf.js:

➜  react-redux-starter-kit git:(master) npm test

> [email protected] test /Users/ciminian/code/profiler-website/src/react-redux-starter-kit
> better-npm-run test

running better-npm-run in /Users/ciminian/code/profiler-website/src/react-redux-starter-kit
Executing script: test

to be executed: babel-node ./node_modules/karma/bin/karma start build/karma.conf
  app:config Create configuration. +0ms
  app:config Apply environment overrides for NODE_ENV "test". +1ms
  app:config No configuration overrides found for NODE_ENV "test" +2ms
  app:webpack:config Create configuration. +778ms
  app:webpack:config Apply ExtractTextPlugin to CSS loaders. +6ms
  app:karma Create configuration. +1ms

START:
11 04 2016 21:09:20.578:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
11 04 2016 21:09:20.588:INFO [launcher]: Starting browser PhantomJS
11 04 2016 21:09:21.437:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#-MQM4skImTvc2mnAAAAA with id 72105283
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Expected token ']'
  at /Users/ciminian/code/profiler-website/src/react-redux-starter-kit/tests/test-bundler.js:55 <- webpack:///tests/test-bundler.js:6:0

Finished in 0.487 secs / 0 secs

SUMMARY:
✔ 0 tests completed
npm ERR! Test failed.  See above for more details.

I've fiddled a bit with karma.conf.js (initially I wanted to make it run just one test file so I can isolate the problem)

➜  react-redux-starter-kit git:(master) git df
diff --git a/build/karma.conf.js b/build/karma.conf.js
index a66d504..b8733fc 100644
--- a/build/karma.conf.js
+++ b/build/karma.conf.js
@@ -64,7 +64,7 @@ const karmaConfig = {
 if (config.coverage_enabled) {
   karmaConfig.reporters.push('coverage')
   karmaConfig.webpack.module.preLoaders = [{
-    test: /\.(js|jsx)$/,
+    test: /it_does_not_care_what_I_put_here\.(js|jsx)$/,
     include: new RegExp(config.dir_client),
     loader: 'isparta',
     exclude: /node_modules/

Now the tests work:

➜  react-redux-starter-kit git:(master) ✗ npm test
[...]
SUMMARY:
✔ 29 tests completed

=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )
================================================================================

It doesn't seem to care what I change it to and it runs all tests, it just doesn't want the default the project comes with. This does not fix the vanilla project, that still times out.

Coverage is wrong, but if I change tests they break so it's running them. Really weird.

[cimi]

Sorry, but this fix doesn't solve the actual issue.

The react/addons error was annoying, but it's not what causes the tests to break. I think the problem is somewhere between karma and PhantomJS.

➜  react-redux-starter-kit git:(master) git ll
* e502f4d (13 hours ago) Justin Greenberg  (HEAD, origin/master, origin/HEAD, master)fix(webpack/karma): add react/addons to externals
* 9bee6b9 (2 days ago) David Zukowski docs(readme): fix outdated referenced to production webpack config
* dbebfaf (2 days ago) David Zukowski docs(readme): add Thank You section
[...]

➜  react-redux-starter-kit git:(master) git st
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working directory clean

➜  react-redux-starter-kit git:(master) npm test

> [email protected] test /Users/ciminian/code/acme/src/react-redux-starter-kit
> better-npm-run test

running better-npm-run in /Users/ciminian/code/acme/src/react-redux-starter-kit
Executing script: test

to be executed: babel-node ./node_modules/karma/bin/karma start build/karma.conf
  app:config Create configuration. +0ms
  app:config Apply environment overrides for NODE_ENV "test". +3ms
  app:config No configuration overrides found for NODE_ENV "test" +1ms
  app:webpack:config Create configuration. +704ms
  app:webpack:config Apply ExtractTextPlugin to CSS loaders. +5ms
  app:karma Create configuration. +1ms

START:
12 04 2016 11:01:00.763:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
12 04 2016 11:01:00.775:INFO [launcher]: Starting browser PhantomJS
12 04 2016 11:02:00.781:WARN [launcher]: PhantomJS have not captured in 60000 ms, killing.
12 04 2016 11:02:02.789:WARN [launcher]: PhantomJS was not killed in 2000 ms, sending SIGKILL.
12 04 2016 11:02:04.796:WARN [launcher]: PhantomJS was not killed by SIGKILL in 2000 ms, continuing.

Finished in 0 secs / 0 secs

npm ERR! Test failed.  See above for more details.

As I mentioned above, I have a project started from last week's version of the starter kit that can run its tests _only if_ I change karma.conf.js; the fresh checkout times out every time I try and run the tests.

Can anyone else reproduce or is my setup a unique snowflake?

[davezuko]

Re-opening until we can figure out the cause. I personally haven't been able to reproduce yet, but I'll give it another go later tonight/tomorrow.

[davezuko]

Can you enable debugging for Karma/PhantomJS and post the results? There are quite a few issues around StackOverflow/Github/etc. dealing with this, so I'm sure whatever oddities you have with your setup that are causing this have been figured out somewhere.

[cimi]

For karma:

➜  react-redux-starter-kit git:(master) ✗ git df
diff --git a/build/karma.conf.js b/build/karma.conf.js
index 5d4f268..5f4f562 100644
--- a/build/karma.conf.js
+++ b/build/karma.conf.js
@@ -73,4 +73,8 @@ if (config.coverage_enabled) {
 }

 // cannot use `export default` because of Karma.
-module.exports = (cfg) => cfg.set(karmaConfig)
+module.exports = (cfg) => {
+  cfg.set(karmaConfig)
+  cfg.logLevel = cfg.LOG_DEBUG
+  return cfg
+}

Output:

➜  react-redux-starter-kit git:(master) npm test

> [email protected] test /Users/ciminian/code/acme/src/react-redux-starter-kit
> better-npm-run test

running better-npm-run in /Users/ciminian/code/acme/src/react-redux-starter-kit
Executing script: test

to be executed: babel-node ./node_modules/karma/bin/karma start build/karma.conf
  app:config Create configuration. +0ms
  app:config Apply environment overrides for NODE_ENV "test". +2ms
  app:config No configuration overrides found for NODE_ENV "test" +1ms
  app:webpack:config Create configuration. +1s
  app:webpack:config Apply ExtractTextPlugin to CSS loaders. +6ms
  app:karma Create configuration. +5ms
13 04 2016 23:52:45.310:DEBUG [config]: autoWatch set to false, because of singleRun
13 04 2016 23:52:45.312:DEBUG [plugin]: Loading karma-* from /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules
13 04 2016 23:52:45.315:DEBUG [plugin]: Loading plugin /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/karma-coverage.
13 04 2016 23:52:45.493:DEBUG [plugin]: Loading plugin /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/karma-mocha.
13 04 2016 23:52:45.495:DEBUG [plugin]: Loading plugin /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/karma-mocha-reporter.
13 04 2016 23:52:45.498:DEBUG [plugin]: Loading plugin /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/karma-phantomjs-launcher.
13 04 2016 23:52:45.534:DEBUG [plugin]: Loading plugin /Users/ciminian/code/acme/src/react-redux-starter-kit/node_modules/karma-webpack-with-fast-source-maps.

START:
13 04 2016 23:52:51.417:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
13 04 2016 23:52:51.425:INFO [launcher]: Starting browser PhantomJS
13 04 2016 23:52:51.426:DEBUG [temp-dir]: Creating temp dir at /var/folders/3x/s9pz758552d5dwg15gqxx6zhgq56vw/T/karma-5633752
13 04 2016 23:52:51.429:DEBUG [launcher]: /usr/local/lib/node_modules/phantomjs/lib/phantom/bin/phantomjs /var/folders/3x/s9pz758552d5dwg15gqxx6zhgq56vw/T/karma-5633752/capture.js
13 04 2016 23:53:51.429:WARN [launcher]: PhantomJS have not captured in 60000 ms, killing.
13 04 2016 23:53:53.435:WARN [launcher]: PhantomJS was not killed in 2000 ms, sending SIGKILL.
13 04 2016 23:53:55.441:WARN [launcher]: PhantomJS was not killed by SIGKILL in 2000 ms, continuing.
13 04 2016 23:53:55.441:DEBUG [launcher]: Process PhantomJS exited with code -1
13 04 2016 23:53:55.441:DEBUG [temp-dir]: Cleaning temp dir /var/folders/3x/s9pz758552d5dwg15gqxx6zhgq56vw/T/karma-5633752
13 04 2016 23:53:55.452:DEBUG [launcher]: PhantomJS failed (timeout). Not restarting.

Finished in 0 secs / 0 secs

13 04 2016 23:53:55.456:DEBUG [karma]: Run complete, exiting.
13 04 2016 23:53:55.456:DEBUG [launcher]: Disconnecting all browsers
npm ERR! Test failed.  See above for more details.

I can't figure out how to enable verbose/debug output for PhantomJS. The docs don't seem to have anything useful. Do you know of any other useful configs I can put in?

[davezuko]

Just curious, have you managed to use PhantomJS successfully in any other project?

[cimi]

I haven't really done JS/front-end development for a while so I can't speak fully for 'other projects', but it seems to be working fine in the basic use-case:

➜  tmp cat test.js
console.log('Hello, world!');
phantom.exit();
➜  tmp phantomjs test.js
Hello, world!

If you have a better test case happy to try it out.

[mzvast]

I've encountered the same timeout issue,on windows 10x64.

It took me hours to figure out what is wrong with this kit,everything works just fine with this kit's clean installation on my linux machine including centos 6 and ubuntu14.04.

Following is my process of investigating into this issue

1.check the network

Karma works with phantomjs perfectly on my another project with angular,so it's not the problem of 127.0.0.1 localhost.

2.check npm installation

And rm -r node_modules&&npm install several times still not works!

So,It is strange aha?

3.debug karma start process

I turned on the debug level in karma as @cimi 's sample above and I inspected my angular project's karma start process as well as this kit,making a comparison, it turns out that the "PHANTOMJS_BIN" was not correct set in this kit ,and

the primary reason of which is that the phantomjs-prebuilt installation has some errors that I didn't realized.And due to this thenode_modules\phantomjs-prebuilt\lib\phantom\phantomjs.exe file wasn't created!Being unable to find the .exe file,npm will find phantomjs in global path which was not exist,after 60s it prompts timeout.

So the workaround is: (pwd is this kit's directory)

npm uninstall phantomjs-prebuilt &&

npm install phantomjs-prebuilt.

If no error prompt,phantomjs.exe file being created,you are good to go! npm would automatically find the exe file to start phantomjs.

PS.
And I would appreciate so much to @cimi 's sample of turn on debug level which leads a correct direction for me to investigate this issue.

[Lily418]

I worked around this by following @mzvast's instructions but I first had to delete a phantomjs binary I already had, so did

# To find the location of the old binary
which phantomjs
# Remove the old binary
sudo rm -f /usr/local/bin/phantomjs
npm uninstall phantomjs-prebuilt
# This will say it can't find phantomjs on the path so will install it into the project's node_modules
npm install phantomjs-prebuilt

[davezuko]

Closing as resolved. This seems like a system issue, so I will add an entry to the FAQ.

[grahamlyus]

I encountered a problem on a colleague's machine with a new setup where the PhantomJS binary could not be found. My fix was to add PHANTOMJS_BIN to the test script definition in package.json:

    "test": {
      "command": "babel-node ./node_modules/karma/bin/karma start bin/karma",
      "env": {
        "NODE_ENV": "test",
        "DEBUG": "app:*",
        "PHANTOMJS_BIN": "./node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs"
      }
    }