Skip to content

Instantly share code, notes, and snippets.

@CurtisHumphrey
Last active September 11, 2016 20:29
Show Gist options
  • Save CurtisHumphrey/cb8865bbdfb802bbe4fb to your computer and use it in GitHub Desktop.
Save CurtisHumphrey/cb8865bbdfb802bbe4fb to your computer and use it in GitHub Desktop.
Testing for styles using React, react-css-modules, and enzyme with chai-enzymes
import React from 'react'
import {
shallow,
render,
} from 'enzyme'
import _ from 'lodash'
import Component from './Component'
import stylesClass from './Component.scss'
// Step 1: this next line is important since the finders expect a '.' at the string start
const styles = _.mapValues(stylesClass, (raw) => '.' + raw)
describe('<Component />', () => {
it('should render style main by default', () => {
// Step 2: this is an html check so render is required
const wrapper = render(<Component />)
// Step 3: if you need to you can check on a particular node but often that just makes the test brittle
expect(wrapper).to.have.descendants(styles.main)
})
it('should render style other by requested', () => {
// this is an html check so render is required
const wrapper = render(<DqButton other={true}/>)
// if you need to you can check on a particular node but often that just makes the test brittle
expect(wrapper).to.have.descendants(styles.other)
})
})
@potapovDim
Copy link

AssertionError: expected the node in <??? /> to have descendants undefined

 HTML:

 <div class="playerWrapper false">
   <div class="video-thumbnail-info false">
     <button class="player-play-button false "></button>
     <div class="video-thumbnail" style="background-image:url(undefined);"></div>
     <input type="range" class="video-seeker range" min="0" max="1" step="any"
     value="0">
     <progress class="video-seeker progress" max="1" value="0"></progress>
   </div>
   <div style="width:100%;height:100%;" class="react-player player-content false">
     <div style="height:100%;display:none;">
       <div id="youtube-player-0"></div>
     </div>
     <div style="display:none;height:100%;background-size:cover;background-position:center;">
       <audio type="audio/mpeg" preload="auto" style="width:100%;height:100%;"></audio>
     </div>
     <iframe frameborder="0" style="display:none;width:100%;height:100%;" allowfullscreen></iframe>
     <video style="width:100%;height:100%;display:none;" preload="auto"></video>
   </div>
 </div>

i got this error when try to use your example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment