Skip to content
This repository has been archived by the owner. It is now read-only.

How do I use jest.mock ? #38

Closed
brandonmp opened this issue Oct 9, 2016 · 7 comments

Comments

@brandonmp
Copy link

commented Oct 9, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Oct 9, 2016

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

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

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

This comment has been minimized.

Copy link
Author

commented Oct 9, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Oct 10, 2016

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

This comment has been minimized.

Copy link

commented Dec 1, 2016

Is there progress on this? 15.4 is out now.

@SpaceK33z

This comment has been minimized.

Copy link

commented Dec 27, 2016

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

@roonyh

This comment has been minimized.

Copy link
Contributor

commented Dec 30, 2016

Yep!

@roonyh roonyh closed this Dec 30, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
4 participants
You can’t perform that action at this time.