javascript - 开 Jest 测试 hasClass() 方法即使为 true 也返回 false

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();

正如我最初所说，尽管我过去也遇到过这种情况，但我确实没有确切的原因来解释为什么会发生这种情况。希望我建议的一种(或两种)解决方法能够有所帮助!