Jest test suite and react-jss dont play nice

[mihok]

Changes that cause react-jss to rebuild its class names causes Jest to puke because the component snapshot is not the same...

Currently the only workaround is to update Jest's snapshots running: ./node_modules/.bin/jest -u

I think we should either consider moving away from react-jss and find another way to easily inject styles without using inline styling

Example:

$ make
npm run coverage

> mnml-client@0.0.2 coverage /home/mihok/development/go/src/github.com/minimalchat/mnml-client
> jest --coverage && cat coverage/lcov.info | coveralls

 FAIL  test/script.test.js
  ● Message › matches snapshot

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -6,11 +6,11 @@
           "clear": "both",
         }
       }>
       <div>
         <ul
    -      className="userContent-1750191772">
    +      className="userContent-3405608545">
           <li>
             Foo Bar
           </li>
         </ul>
       </div>
      
      at Object.<anonymous> (test/script.test.js:62:18)
      at process._tickCallback (internal/process/next_tick.js:103:7)

  ● Input › matches snapshot

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -1,5 +1,5 @@
     <textarea
    -  className="input-425402174"
    +  className="input-886653550"
       onKeyDown={[Function]}
       placeholder="Type a message…"
       type="text" />
      
      at Object.<anonymous> (test/script.test.js:90:18)

  ● Chat › matches snapshot

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -3,21 +3,21 @@
       <div
         className="box-4225728987">
         <div
           className="innerWrapper-796889303">
           <div
    -        className="header-181289956">
    +        className="header-1678930929">
             <span
               className={undefined}>
               <strong>
                 John
               </strong>
                from 
               ACME
             </span>
             <button
    -          className="icon-1322118302"
    +          className="icon-3194709395"
               onClick={[Function]}>
               ×
             </button>
           </div>
           <div
    @@ -27,11 +27,11 @@
               <ul
                 className="messagesList-539233948" />
             </div>
           </div>
           <textarea
    -        className="input-425402174"
    +        className="input-886653550"
             onKeyDown={[Function]}
             placeholder="Type a message…"
             type="text" />
         </div>
       </div>
      
      at Object.<anonymous> (test/script.test.js:134:18)

  state
    ✓ has a ui.style property (254ms)
  Message
    ✕ matches snapshot (60ms)
  MessageList
    ✓ matches snapshot (6ms)
  Input
    ✕ matches snapshot (9ms)
    ✓ emits a client:typing event on keyDown (29ms)
    ✓ emits a client:message event on keyDown (11ms)
  Chat
    ✕ matches snapshot (16ms)
    ✓ starts a socket connection (1ms)

-------------------|----------|----------|----------|----------|----------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-------------------|----------|----------|----------|----------|----------------|
All files          |     85.2 |    53.85 |    63.33 |    84.97 |                |
 script.jsx        |     84.9 |    45.83 |    63.33 |    84.66 |... 513,514,515 |
 styleOverrides.js |      100 |      100 |      100 |      100 |                |
 styles.js         |      100 |    63.79 |      100 |      100 |                |
-------------------|----------|----------|----------|----------|----------------|
Snapshot Summary
 › 3 snapshot tests failed in 1 test suite. Inspect your code changes or run with `npm run coverage -- -u` to update them.

Test Suites: 1 failed, 1 total
Tests:       3 failed, 5 passed, 8 total
Snapshots:   3 failed, 1 passed, 4 total
Time:        4.03s
Ran all test suites.

npm ERR! Linux 4.8.13-1-ARCH
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "coverage"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! mnml-client@0.0.2 coverage: `jest --coverage && cat coverage/lcov.info | coveralls`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mnml-client@0.0.2 coverage script 'jest --coverage && cat coverage/lcov.info | coveralls'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mnml-client package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     jest --coverage && cat coverage/lcov.info | coveralls
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mnml-client
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mnml-client
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/mihok/development/go/src/github.com/minimalchat/mnml-client/npm-debug.log
make: *** [Makefile:10: coverage] Error 1

[mihok]

Moving away from React-JSS for now