尝试测试 vue css 样式时出现问题

Question

当我尝试测试将 CSS 样式“显示”更改为“无”的方法时，我的单元测试出现问题。测试失败并显示消息：

Expected: "display: none"
Received: undefined

在我的组件中我有方法：

closeCookie() {
  document.querySelector(".cookies").style.display = "none";
}

Unit test

beforeEach(() => {
    wrapper = shallowMount(Content);
});

it('change display for cookies class when click by the closeCookie', () => {
    const stub = jest.fn();
    wrapper.setMethods({ closeCookie: stub });
    wrapper.find(".cross").trigger("click");
    expect(wrapper.find(".cookies").attributes().style).toBe("display: none");
  });

我在期待什么？

预期：“显示：无”

我收到了什么？

收到：未定义

比较两种不同类型的值。预期的字符串，但未定义。

我不确定，但我的班级似乎没有 css 样式“显示：无”。 如何测试？

Answer 1

document 在使用 jest 和 vue-test-utils 时未定义。我建议您将v-show 参数添加到cookies 块中，并将其绑定到一些data 布尔键，该键将通过closeCookie 方法设置为false。