使用酶/玩笑测试多个类名答案

【问题标题】：testing Multiple classnames using enzyme/jest使用酶/玩笑测试多个类名
【发布时间】：2021-04-18 13:16:54
【问题描述】：

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

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

在某些情况下，我需要寻找包含 isOverflown 的类，但我不确定最好的方法是什么。寻找访问类名的任何建议

  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>

如何实现，谢谢帮助

【问题讨论】：

你可以使用toContain，或者hasClass。
@jonrsharpe expect(wrapper.find('a').hasClass('isOverflown')).to.equal(true) 这是你要调查的那个
.to.equal 不是 Jest 的匹配器语法，否则是的。
使用 find() .className 无法获取该类名吗？？
什么意思“这不可能”？是的，当然你可以使用例如.find(".isOverflown") 如果你愿意的话。

标签： reactjs react-redux jestjs enzyme

【解决方案1】：

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

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

wrapper.debug() (from enzymejs documention)

返回一个类似于 HTML 的包装器字符串，用于调试目的。当测试未按预期通过时打印到控制台很有用。

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

【讨论】：

@Archana 请尝试最新编辑
它最初包含多个拼写错误，现在似乎在断言整个类似 HTML 的调试字符串，这几乎不可靠 - 如果该类名称出现在呈现内容的其他地方怎么办？
@jonrsharpe 你能说得更具体些吗
@Arcana 好吧，举个简单的例子，如果它呈现<a class="wrongName" href="https://example.com">rightName</a> 会怎样？即使rightName 甚至不是一个类，测试也通过了。仅检查测试是否出现在渲染的 DOM 中某处并不会给软件运行正确的信心。
@jonrsharpe 编辑过的问题是否不足以得到答案

【解决方案2】：

试试这个。

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

【讨论】：

@jonrsharpe 你对这个答案有什么看法