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

在使用jest和vue-test-utils时未定义

document。我建议您改为将v-show参数添加到cookies块，并将其绑定到一些data布尔键，该键将通过false方法设置为closeCookie。

尝试测试Vue CSS样式时遇到问题

1 个答案: