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 <button>{props.children || "按鈕"}</button>;
};
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 函數(shù) 創(chuàng)建一個 組件實例
const Dom = render(<Button>測試按鈕</Button>);
//這里使用getByText方法返回HTMLElement類型實例,因為后面斷言的話,需要HTMLElement實例
const domEle = Dom.getByText("測試按鈕");
//斷言實例是一個 正常dom 對象
expect(domEle).toBeInTheDocument();
});
});
