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相比，为什么我的第一套日志记录为true（当我搜索.preview-icon时）？ HTML匹配，并且在第二组记录HTML中，它显然具有类is-disabled。

我的实际Expect语句是当前的解决方法，但是我觉得此测试缺少一些内容。任何帮助是极大的赞赏。谢谢。

Answer 1

对于这种情况为什么会发生，我确实没有任何答案，但是我之前已经看到过，有两种可能的解决方法，您可以尝试解决这些问题。

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

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

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

但是，正如我最初说的那样，我确实没有确切的理由说明为什么在您的情况下会发生这种情况，尽管这也是我过去遇到的事情。希望我建议的解决方法中的一个（或两个）都能有所帮助！

笑话测试hasClass（）方法即使为true也会返回false

1 个答案: