我有以下 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...
最佳答案
您应该使用 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.
关于javascript - enzyme hasClass 返回 false 是错误的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54459683/