javascript - enzyme hasClass 返回 false 是错误的

Question

我有以下 React 组件:

const FeatureAccess = ({ value }) => {
  let liClass = `FeatureAccessList-item FeatureAccessList-item--${value}`

  return (
    <li class={liClass}>
      <label for={`user_member_permission_ids_${value}`}>
        <input
          name='user[member_permission_ids][]'
          id={`user_member_permission_ids_${value}`}
          value={value}
        />
      </label>
    </li>
  )
}

li 元素有两个类:

FeatureAccessList-item
FeatureAccessList-item--${value}

但是我的测试总是失败，Enzyme 出于某种原因没有正确断言它:

// wrapper = mount(<FeatureAccess {...props} />)

it('should have the correct class depending on "value"', () => {
  const value = 'Spider-sense'
  wrapper.setProps({ value })

  // Expected: true, Received: false
  expect(wrapper.find('li').hasClass(`FeatureAccessList-item--${value}`)).toBe(true)
})

这没有任何意义，因为如果我记录 wrapper.find('li') 的实际结果，这就是我得到的:

  console.log spec/javascripts/Users/components/FeatureAccess.spec.jsx:46

    <li class="FeatureAccessList-item FeatureAccessList-item--Spider-sense">
      <label for="user_member_permission_ids_Spider-sense">
        <input class="user_member_permission_ids " name="user[member_permission_ids][]" id="user_member_permission_ids_Spider-sense" value="Spider-sense" type="checkbox" checked={false} onChange={[Function: onChange]} />
      </label>
    </li>

类(class)就在那里!这里发生了什么？

我还尝试使用 find(`.FeatureAccessList-item--${value}`).exist() 并且它也返回 false...

Answer 1

您应该使用 className 而不是 class

https://reactjs.org/docs/introducing-jsx.html

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

For example, class becomes className in JSX, and tabindex becomes tabIndex.