Enzyme: find the className fail

[GZWZC]

i have a problem.
wrapper.find('.icon').simulate('click')-----fail
Method “props” is only meant to be run on a single node. 0 found instead.

testComponent.js

import React from 'react'
import style from './test.css'

var testComponent  = React.createClass({
    render: function() {
        return <div className={style.icon} onClick={() => this.props.func()}>
            <img src="assets/img/icon.png" />
        </div>;
    }
});


module.exports = testComponent;

test.js

import React from 'react';
import {shallow, mount, render} from 'enzyme';
import testComponent from '../testComponent.js';

const setup = () => {
    // 模拟 props
    const props = {
        // Jest 提供的mock 函数
        func: jest.fn()
    }
    // 通过 enzyme 提供的 shallow(浅渲染) 创建组件
    const wrapper = shallow(<testComponent {...props} />)
    return {
        props,
        wrapper
    }
}


test('testComponent is able to clcik', () => {
    const { wrapper, props } = setup();
    wrapper.find('.icon').simulate('click');
    expect(props.func).toBeCalled()
});

[ljharb]

What does wrapper.debug() say? I don't see why style.icon is necessarily the string "icon".

[GZWZC]

@ljharb Thank you for your attention to this issue，
i use webpack to manage my code，import the style-loader so that className is style,icon

test.css.

.icon{
  color:#fff;
}

[GZWZC]

@ljharb now I use the debugging tool to print it

[GZWZC]

@ljharb
debug is

<div className={[undefined]} onClick={[Function]}>
<img src="assets/img/icon.png" />
</div>

[ljharb]

I'm not sure how importing css works; but in that example it's clear that style.icon is undefined, not "icon".

[ljharb]

Happy to reopen if there's something actionable here.

[Kale-ab]

I have the same issue, using local css in my component.

Code

 import React from "react"
import styles from "./HorizontalSelectElement.scss"
import toJS from "../ToJS"
import PropTypes from "prop-types"

class HorizontalSelectElement extends React.Component {
  handleClick = event => {
    event.preventDefault()
    if (this.props.selected === false) {
      this.props.updateParent(this.props.elementIndex)
    }
  }

  render() {
    return (
      <div
        className={styles.activeDiv}
        onClick={this.handleClick}
      >
      </div>
    )
  }
}

Test

describe("HorizontalSelectElement correct class when selected", () => {
  const index = 1
  const data = { colourDescription: "Silver", colourCode: "#C0C0C0" }

  it("renders colour name and colour block", () => {
    const wrapper = mount(
      <HorizontalSelectElement
        selected={true}
        elementIndex={index}
        colour={true}
        data={data}
        styles={stlyes}
      />,
    )
    console.log(wrapper.debug())
}

Output of wrapper.debug()

<Component selected={true} elementIndex={1} colour={true} data={{...}} styles="HorizontalSelect.scss">
        <HorizontalSelectElement selected={true} elementIndex={1} colour={true} data={{...}} styles="HorizontalSelect.scss">
          <div className={[undefined]} onClick={[Function]}>
          </div>
        </HorizontalSelectElement>
      </Component>

[ljharb]

@Kale-ab it seems apparent that your css import isn’t mocked out properly for testing, which is why you get undefined in the debug.

[ewanjones]

I'm also having the same issue, except my debug outputs classes like _pheno__item___1_Duw _pheno__focused___1wB3n due to webpack bundling. How do I get enzyme to reference these?

[Kale-ab]

For anyone still struggling with using local css files in tests (and you are using webpack), https://facebook.github.io/jest/docs/en/webpack.html#mocking-css-modules .