reactjs - 如何模拟 window.screen.width 属性？

Question

我的组件中有这个条件。

{window.screen.width > 1000 && (
            <WebFeatures
              scrolling={this.handleScrollToStats}
              ref_var={this.statsRef}
              ref_app={this.myRef}
              ref_reimburse={this.reimburse}
              ref_expense={this.expense}
            />``
          )}

我怎样才能测试这个条件？

Answer 1

您可以在 window.secreen.width 上使用 spyOn 并返回测试所需的值:

jest.spyOn(window.screen, "width", "get").mockReturnValue(WIDTH);

您的测试将如下所示:

it("Should NOT render WebFeatures in small screen", () => {
  jest.spyOn(window.screen, "width", "get").mockReturnValue(1000);
  const wrapper = mount(<YourComponent />);
  expect(wrapper.find("WebFeatures").exists()).toBe(false);
});

it("Should render WebFeatures in large screen", () => {
  jest.spyOn(window.screen, "width", "get").mockReturnValue(1001);
  const wrapper = mount(<YourComponent />);
  expect(wrapper.find("WebFeatures").exists()).toBe(true);
});