开发者社区> 黎燃> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【React高级】 数据获取然后进行创建测试(使用多渲染器以及计时器)

简介: 【React高级】 数据获取然后进行创建测试(使用多渲染器以及计时器)
+关注继续查看

@[toc]

创建

对于每个测试,我们通常都希望将React树呈现给附加到文档的DOM元素。这很重要,因为它可以接收DOM事件。测试完成后,我们需要“清理”并从文档中卸载树。

import { unmountComponentAtNode } from "react-dom";

let container = null;
beforeEach(() => {
  // 创建一个 DOM 元素作为渲染目标
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // 退出时进行清理
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

一种常见的方法是使用一对beforeEach和afterEach块来保持它们运行并隔离测试本身的影响。

act(() => {
  // 渲染组件
});
// 进行断言

这有助于在使用应用程序时使测试运行更接近真实用户体验。这些示例的其余部分使用act()进行这些保证。
可能会发现直接使用act()有点过于冗长。为了避免一些样板代码,可以使用React测试库。这些助手使用act()函数封装。


import React from "react";

export default function Hello(props) {
  if (props.name) {
    return <h1>你好,{props.name}!</h1>;
  } else {
    return <span>嘿,陌生人</span>;
  }
}

数据获取

可以使用假数据模拟请求,而不是在所有测试中调用真实的API。使用“假”数据模拟数据采集可以防止由于后端不可用而导致的不稳定测试,并使其运行更快。注意:可能仍然希望使用“端到端”框架运行测试子集,以显示整个应用程序是否协同工作。


import React, { useState, useEffect } from "react";

export default function User(props) {
  const [user, setUser] = useState(null);

  async function fetchUserData(id) {
    const response = await fetch("/" + id);
    setUser(await response.json());
  }

  useEffect(() => {
    fetchUserData(props.id);
  }, [props.id]);

  if (!user) {
    return "加载中...";
  }

  return (
    <details>
      <summary>{user.name}</summary>
      <strong>{user.age}</strong> 岁
      <br />
      住在 {user.address}
    </details>
  );
}
import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import User from "./user";

let container = null;
beforeEach(() => {
  // 创建一个 DOM 元素作为渲染目标
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // 退出时进行清理
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("渲染用户数据", async () => {
  const fakeUser = {
    name: "Joni Baez",
    age: "32",
    address: "123, Charming Avenue"
  };
  jest.spyOn(global, "fetch").mockImplementation(() =>
    Promise.resolve({
      json: () => Promise.resolve(fakeUser)
    })
  );

  // 使用异步的 act 应用执行成功的 promise
  await act(async () => {
    render(<User id="123" />, container);
  });

  expect(container.querySelector("summary").textContent).toBe(fakeUser.name);
  expect(container.querySelector("strong").textContent).toBe(fakeUser.age);
  expect(container.textContent).toContain(fakeUser.address);

  // 清理 mock 以确保测试完全隔离
  global.fetch.mockRestore();
});

某些模块在测试环境中可能无法正常工作,或者对测试本身不重要。用虚拟数据模拟这些模块,更容易为代码编写测试。

多渲染器

在极少数情况下,可能在使用多个渲染器的组件上运行测试。例如, 可能正在内部使用ReactDOM的react测试渲染器组件上运行快照测试。在子组件中渲染以渲染某些内容。在此场景中,可以使用与其渲染器对应的动作()来包装更新。

import { act as domAct } from "react-dom/test-utils";
import { act as testAct, create } from "react-test-renderer";
// ...
let root;
domAct(() => {
  testAct(() => {
    root = create(<App />);
  });
});
expect(root).toMatchSnapshot();

计时器

代码可能使用基于计时器的函数(如setTimeout)来安排将来的更多工作。在此示例中,多选面板等待选择并向前移动。如果在5秒内没有选择,则超时:

import React, { useEffect } from "react";

export default function Card(props) {
  useEffect(() => {
    const timeoutID = setTimeout(() => {
      props.onSelect(null);
    }, 5000);
    return () => {
      clearTimeout(timeoutID);
    };
  }, [props.onSelect]);

  return [1, 2, 3, 4].map(choice => (
    <button
      key={choice}
      data-testid={choice}
      onClick={() => props.onSelect(choice)}
    >
      {choice}
    </button>
  ));
}

我们可以使用Jest的计时器模拟为这个组件编写测试,并测试它可能处于的不同状态。

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Card from "./card";

jest.useFakeTimers();

let container = null;
beforeEach(() => {
  // 创建一个 DOM 元素作为渲染目标
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // 退出时进行清理
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("超时后应选择 null", () => {
  const onSelect = jest.fn();
  act(() => {
    render(<Card onSelect={onSelect} />, container);
  });

  // 提前 100 毫秒执行
  act(() => {
    jest.advanceTimersByTime(100);
  });
  expect(onSelect).not.toHaveBeenCalled();

  // 然后提前 5 秒执行
  act(() => {
    jest.advanceTimersByTime(5000);
  });
  expect(onSelect).toHaveBeenCalledWith(null);
});

it("移除时应进行清理", () => {
  const onSelect = jest.fn();
  act(() => {
    render(<Card onSelect={onSelect} />, container);
  });
  act(() => {
    jest.advanceTimersByTime(100);
  });
  expect(onSelect).not.toHaveBeenCalled();

  // 卸载应用程序
  act(() => {
    render(null, container);
  });
  act(() => {
    jest.advanceTimersByTime(5000);
  });
  expect(onSelect).not.toHaveBeenCalled();
});

it("应接受选择", () => {
  const onSelect = jest.fn();
  act(() => {
    render(<Card onSelect={onSelect} />, container);
  });

  act(() => {
    container
      .querySelector("[data-testid='2']")
      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });

  expect(onSelect).toHaveBeenCalledWith(2);
});

只能在某些测试中使用假计时器。上面,我们调用jestUseFakeTimers()来启用它们。它们提供的主要优点是,的测试实际上不需要等待5秒才能执行,并且不需要使组件代码更复杂地进行测试。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云JAVA高级测试试题及答案(十二)
阿里云JAVA高级测试试题及答案
0 0
阿里云JAVA高级测试试题及答案(十一)
阿里云JAVA高级测试试题及答案
0 0
阿里云JAVA高级测试试题及答案(十)
阿里云JAVA高级测试试题及答案
0 0
阿里云JAVA高级测试试题及答案(九)
阿里云JAVA高级测试试题及答案
0 0
阿里云JAVA高级测试试题及答案(八)
阿里云JAVA高级测试试题及答案(八)
0 0
阿里云JAVA高级测试试题及答案(七)
阿里云JAVA高级测试试题及答案(七)
0 0
阿里云JAVA高级测试试题及答案(六)
阿里云JAVA高级测试试题及答案(六)
0 0
阿里云JAVA高级测试试题及答案(五)
阿里云JAVA高级测试试题及答案
0 0
阿里云JAVA高级测试试题及答案(四)
阿里云JAVA高级测试试题及答案
0 0
区块链交易所搭建开发_平台_测试_系统智能合约ATOM代示例
Cosmos(ATOM)没有传统意义上的原生智能合约,因为它没有自己的图灵完备编程语言。 相反,Cosmos 使用区块链间通信 (IBC) 协议来允许不同区块链之间的通信和价值转移。 这允许开发人员构建跨越多个区块链的去中心化应用程序。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
ICA安全标准组测试认证分享
立即下载
MaxCompute基于BigBench标准的最新测试进展
立即下载
用AI高效测试移动应用
立即下载