开玩笑测试 hasClass() 方法即使为真也返回假

Question

我已经为此苦苦挣扎了一段时间。它基本上归结为检查渲染的组件是否具有特定的类。我已经记录了它，只有当我在我正在搜索的特定类上调用 .find() 时它才会返回 true。这是我的输出：

test('Preview icon to be disabled', () => {
    console.warn(component
      .find('.preview-icon.is-disabled')
      .at(0)
      .html(),
    );

    console.warn(component
      .find('.preview-icon.is-disabled')
      .at(0)
      .hasClass('is-disabled'),
    );

    console.warn(component
      .find('.preview-icon')
      .at(0)
      .html(),
    );

    console.warn(component
      .find('.preview-icon')
      .at(0)
      .hasClass('is-disabled'),
    );

    expect(component
      .find('.preview-icon.is-disabled')
      .at(0)
      .exists(),
    ).toEqual(true);
  });

这个输出：

console.warn client/src/components/Preview.test.js:69
  <span class="toolbar-icon preview-icon is-disabled">Test Component</span>

console.warn client/src/components/Preview.test.js:75
  true

console.warn client/src/components/Preview.test.js:81
  <span class="toolbar-icon preview-icon is-disabled">Test Component</span>

console.warn client/src/components/Preview.test.js:87
  false

我的问题是，为什么我的第一组日志记录为真（当我搜索 .preview-icon.is-disabled 时）而不是当我只搜索 .preview-icon 时？ HTML 匹配，并且在第二组日志记录 HTML 中，它显然具有 is-disabled 类。

我的实际期望语句是我目前的解决方法，但我觉得这个测试缺少一些东西。任何帮助是极大的赞赏。谢谢你。

Answer 1

我真的不知道为什么会发生这种情况，但我以前见过它并且有两个潜在的解决方法，您可以尝试解决这个问题。

第一个解决方法围绕着您的 .preview-icon 选择器，但不够具体。如果您使用span.preview-icon，它很可能会解决您的问题。

如果您使用mount 而不是shallow 来呈现您的组件，我将建议的第二种解决方法将起作用。您可以使用这样的验证来解决此问题：

expect(component.find('.preview-icon').get(0).getDOMNode().classList.contains('is-disabled')).toBeTruthy();

不过，正如我最初所说的，我真的没有确切的理由说明为什么会发生这种情况，尽管我过去也遇到过这种情况。希望我建议的一种（或两种）解决方法会有所帮助！