Фермент 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 имеет 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(), и он также возвращает ложь ...

Answer 1

Вы должны использовать className вместо class

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

Поскольку JSX ближе к JavaScript, чем к HTML, React DOM вместо этого использует соглашение об именах свойств camelCaseимен атрибутов HTML.

Например, класс становится className в JSX, а tabindex становится tabIndex.