Doesn't play well with CSS modules

[meleyal]

When class names are dynamically generated via e.g. CSS modules subTree() and dive() are not very helpful:

// Toolbar.js

import styles from './styles/Toolbar.scss'

...

<div className={styles.root}>
  <div>
    <Toolbutton text={'Previous'} onClick={() => dispatch(previousPage())} />
    <Toolbutton text={'Next'} onClick={() => dispatch(nextPage())} />
  </div>
</div>

// Toolbutton.js

import styles from './styles/Toolbutton.scss'

...

<div className={styles.root} onClick={this.props.onClick}>
  {this.props.text}
</div>

// Toolbar-test.js

import styles from './styles/Toolbutton.scss'

...

it('triggers action on clicking next page button', () => {
  const tree = shallowRender(
    <Component {...props} />
  )
  const subTree = tree.subTree(`.${styles.nextPageButton}`) // => false
  const subTree = tree.dive([`.${styles.nextPageButton}`]) // => .Toolbutton-nextPageButton-1F6v2 not found in tree

})

[glenjamin]

I'm not sure why that's not finding anything - if you do a toString(), what does the class actually look like?

In general I wouldn't advise doing this sort of thing - if you want to find an element by some property, I recommend putting something predictable on it for that purpose specifically.

<div className={`qa-next-page ${styles.nextPageButton}`} />