jest 入门(三) react 使用jest 进行测试

react 使用 jest 进行 测试

安装依赖库

npm install @testing-library/react @testing-library/jest-dom -D

新建简单组件Button src/components/button/index.tsx

// src/components/button/index.tsx

const Button = (props: any) => {
  return {props.children || "按钮"};
};

export default Button;

新建测试文件 src/components/button/index.test.tsx

// src/components/button/index.test.tsx

import { render } from "@testing-library/react";
import Button from "./index";

describe("button 组件测试", () => {
  it("1.组件是否能正常展示", () => {
    //利用 render 函数 创建一个 组件实例
    const Dom = render(测试按钮);
    //这里使用getByText方法返回HTMLElement类型实例,因为后面断言的话,需要HTMLElement实例
    const domEle = Dom.getByText("测试按钮");
    //断言实例是一个 正常dom 对象
    expect(domEle).toBeInTheDocument();
  });
});

npm run test 查看测试结果