使用酶/jest测试多个类名

Question

我的组件的类是使用CSS模块动态生成的。他们最终看起来像这样：

<a class="ScrollArea__scrollArea___HQjeV isOverflown  TMwDC"></a>

在某些情况下，我需要查找包含isOverfly的类，但我不确定最好的方法是什么

it('render', () => {
const wrapper= mount(<ScrollArea  {...props} />)
expect(wrapper.find('a').props().className).toBe('isOverflown')

获取错误：

expected: isOverflown
received: ScrollArea__scrollArea___HQjeV isOverflown  TMwDC

console.log(wrapper.debug(((导致

<Memo() title="title" href="link address">
<StyledComponent onClick={[undefined]} href="link address" target="_blank" disabled={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
<a className="ScrollArea__scrollArea___HQjeV isOverflown  TMwDC" onClick={[undefined]} href="link address" target="_blank" disabled={[undefined]}>
title
</a>
</StyledComponent>

如何实现这一点，感谢的帮助

Answer 1

试试这个。

expect(wrapper.exists('a.isOverflown')).to.equal(true);

Answer 2

expect(wrapper.find('a').debug()).toContain('yourCalssNAme').

如果您不在组件中的其他任何位置使用这个类名作为字符串，这将是一个安全检查。

wrapper.debug() (from enzymejs documention)

返回包装器的类似HTML的字符串，用于调试。当测试没有通过时，打印到控制台很有用。

在这种情况下，它还会打印你的类名，所以如果你想确保组件包括它，请使用我上面的代码。