Testing for styles using React, react-css-modules, and enzyme with chai-enzymes

styles.spec.js

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)
  })
})

This fails for me.

SyntaxError: /.../app/components/Component.css: Unexpected token (1:0)
> 1 | .main {
    | ^
  2 |     border-radius: 20px 20px 20px 20px;
    ...
    ...

It doesn't seem to recognize the first character of the css file.
Might this be because I am not using sass, as I see by your extension? Or because I'm using webpack, with a basic configuration (https://github.com/christianalfoni/webpack-express-boilerplate)

Any suggestions? thanks.

function noop() {
return null;
}

require.extensions['.css'] = noop;
require.extensions['.scss'] = noop;
add to your setup file

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