How do I use jest.mock ?

[brandonmp]

Because of some strange jest behavior w/ material-ui, I have to mock a component to do a snapshot test:

jest.mock('material-ui/toggle')

How can I do this while using storyshot?

[roonyh]

storyshots does not have jest's mocking abilities. But it might work without the mock. Did you get an error while running storyshots? Could you show the error if so?

[brandonmp]

sure, i posted the issue at the Material-UI repo w/ the error output

after some research, it looks like there's a bug in React that prevents snapshot testing of components that rely on refs. Since MUI's toggle uses a ref, it breaks the snapshot generation.

when i make a regular jest test, i can call jest.mock('material-ui/toggle') in-line within the test file, and it bypasses the ref. so if i could do that in storyshots, it would be great.

otherwise, apparently react 15.4.0 has some fixes for the underlying problem, so mocks won't be necessary after that.

[brandonmp]

here's my story:

import React from 'react'
import { action, storiesOf } from '@kadira/storybook';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { customMuiTheme } from '../src/lib/styles/customMUITheme.js'
import ToggledCheckboxGrid from '../src/components/ToggledCheckboxGrid'
import Immutable from 'immutable'
const laundry = Immutable.Map({
  "In-Unit": false,
  "In-Building": false
})


storiesOf('Toggleable Checkbox Grid', module)
  .addDecorator(story => (
    <MuiThemeProvider muiTheme={getMuiTheme(customMuiTheme) }>
      {story() }
    </MuiThemeProvider>
  ))
  .add('default mode', _ => (
    <div style={{ padding: '30px', width: '200px', }}>
      <ToggledCheckboxGrid
        fieldName="Laundry"
        fieldValues={laundry}
        handleCheckClick={action('Check clicked')}
        />
    </div>
  ))

here's the error output for the storyshot

npm run test-storybook                                                                                    

> react-redux-starter-kit@3.0.0-alpha.2 test-storybook /home/bmp/code/wayhome/homeseeker-fresh                                                                    
> better-npm-run test-storybook                                                                                                                                   

running better-npm-run in /home/bmp/code/wayhome/homeseeker-fresh                                                                                                 
Executing script: test-storybook                                                                                                                                  

to be executed: storyshots  
Toggleable Checkbox Grid                                                                                                                                          
props Map { "In-Unit": false, "In-Building": false, "Hookups Avail.": false, "None": false, "Some": true, "Stacked": false, "These are fake": true }              

✗ default mode: ERROR                                                                                                                                             
  TypeError: Cannot read property 'checked' of null                                                                                                               
      at EnhancedSwitch.componentDidMount (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/material-ui/internal/EnhancedSwitch.js:205:50)                    
      at /home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/ReactCompositeComponent.js:264:25                                                         
      at measureLifeCyclePerf (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/ReactCompositeComponent.js:74:12)                                   
      at /home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/ReactCompositeComponent.js:263:11                                                         
      at CallbackQueue._assign.notifyAll (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/CallbackQueue.js:67:22)                                  
      at ReactTestReconcileTransaction.ON_DOM_READY_QUEUEING.close (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/ReactTestReconcileTransaction.j
s:37:26)                                                                                                                                                          
      at ReactTestReconcileTransaction.Mixin.closeAll (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/Transaction.js:204:25)                      
      at ReactTestReconcileTransaction.Mixin.perform (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/Transaction.js:151:16)                       
      at batchedMountComponentIntoNode (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/ReactTestMount.js:63:27)                                   
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/home/bmp/code/wayhome/homeseeker-fresh/node_modules/react/lib/Transaction.js:138:20)             


Test Summary                                                                                                                                                      
> 1 stories tested.                                                                                                                                               
> 1 tests errored.                                                                                                                                                

npm ERR! Linux 4.4.0-38-generic                                                                                                                                   
npm ERR! argv "/home/bmp/.nvm/versions/node/v6.3.1/bin/node" "/home/bmp/.nvm/versions/node/v6.3.1/bin/npm" "run" "test-storybook"                                 
npm ERR! node v6.3.1                                                                                                                                              
npm ERR! npm  v3.10.3                                                                                                                                             
npm ERR! code ELIFECYCLE                                                                                                                                          
npm ERR! react-redux-starter-kit@3.0.0-alpha.2 test-storybook: `better-npm-run test-storybook`                                                                    
npm ERR! Exit status 1                                                                                                                                            
npm ERR!                                                                                                                                                          
npm ERR! Failed at the react-redux-starter-kit@3.0.0-alpha.2 test-storybook script 'better-npm-run test-storybook'.                                               
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 react-redux-starter-kit package,                                                                       
npm ERR! not with npm itself.                                                                                                                                     
npm ERR! Tell the author that this fails on your system:                                                                                                          
npm ERR!     better-npm-run test-storybook                                                                                                                        
npm ERR! You can get information on how to open an issue for this project with:                                                                                   
npm ERR!     npm bugs react-redux-starter-kit                                                                                                                     
npm ERR! Or if that isn't available, you can get their info via:                                                                                                  
npm ERR!     npm owner ls react-redux-starter-kit                                                                                                                 
npm ERR! There is likely additional logging output above. 

the file this is referencing is from material-ui

[roonyh]

Thanks for the detailed information!

I understand the problem now and have reproduced it myself. I can implement a permanent solution once react 15.4 is out with facebook/react#7649. Unfortunately, until then I am not sure what I can do about this :(

It will be better to wait for 15.4 and do a good solution than doing something hacky right now. But I will look a bit into this.

[chrbala]

Is there progress on this? 15.4 is out now.

[SpaceK33z]

I believe this has been fixed in v3.0, because it now uses Jest for snapshotting.

[roonyh]

Yep!