Ryo.gift | Web developer blog

Web開発者のブログです。

Reactで簡単なテストを書いてみる

Reactによって、生成されたDOMの結果を確認する。

/* App.css */
.App {
  text-align: center;
}
// App.js
import "./App.css";

const App = () => (
  <div className="App">
    <p>sample</p>
  </div>
);

export default App;
// App.test.js
import { render, screen } from "@testing-library/react";
import App from "./App";

test("sampleの文字列が描画されること", () => {
  render(<App />);
  const textElement = screen.getByText("sample");
  expect(textElement).toBeInTheDocument();
});
$ yarn test ./src/App.test.js
 PASS  src/App.test.js
  ✓ sampleの文字列が描画されること (61 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.023 s, estimated 7 s