Skip to content

Instantly share code, notes, and snippets.

@real34
Created July 4, 2019 12:01
Show Gist options
  • Save real34/429a8c7ca9e638b681f66ef643143101 to your computer and use it in GitHub Desktop.
Save real34/429a8c7ca9e638b681f66ef643143101 to your computer and use it in GitHub Desktop.
import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);
const decrement = () => setCounter(counter - 1);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>Counter: {counter}</p>
<button onClick={increment} title="Increment">
Increment
</button>
<button onClick={decrement} title="Decrement">
Decrement
</button>
<p>{new Date(Date.now()).toLocaleDateString()}</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { render, cleanup, fireEvent } from "@testing-library/react";
// import 'jest-dom/extend-expect'
afterEach(cleanup);
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
it("start to count at zero", async () => {
const { getByText } = render(<App />);
return expect(getByText(/Counter: \d/).innerHTML).toBe("Counter: 0");
});
it("should increment counter when clicking on +", async () => {
const { getByText, getByTitle } = render(<App />);
const button = getByTitle("Increment", { selector: "button" });
fireEvent.click(button);
fireEvent.click(button);
return expect(getByText(/Counter: \d/).innerHTML).toBe("Counter: 2");
});
it("should decrement counter when clicking on -", async () => {
const { getByText, getByTitle } = render(<App />);
const button = getByTitle("Decrement", { selector: "button" });
fireEvent.click(button);
fireEvent.click(button);
return expect(getByText(/Counter: -?\d/).innerHTML).toBe("Counter: -2");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment