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元素具有2个类：

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

但是我的测试始终失败，由于某些原因，酶没有正确断言：

// 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>

上课了！这是怎么回事？

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

Answer 1

您应该使用className而不是class

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

由于JSX比HTML更接近JavaScript，因此React DOM使用   camelCase属性命名约定，而不是HTML属性名称。

例如，在JSX中，class变为className，而tabindex变为   tabIndex。

酶hasClass返回false是错误的

1 个答案: