Skip to content

Instantly share code, notes, and snippets.

@mizchi

mizchi/try-react-testing-library.tsx

Last active January 30, 2019 14:10
Show Gist options
  • Save mizchi/74dfc801bf7cde9792973e2f6d2ee23c to your computer and use it in GitHub Desktop.
Save mizchi/74dfc801bf7cde9792973e2f6d2ee23c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
try-react-testing-library.tsx
import React from "react";
import { createStore, Store } from "redux";
import { Provider, connect } from "react-redux";
import { render, fireEvent, cleanup } from "react-testing-library";
// implements
type State = { count: number };
function reducer(state = { count: 0 }, action: any) {
switch (action.type) {
case "INCREMENT":
return {
count: state.count + 1
};
case "DECREMENT":
return {
count: state.count - 1
};
default:
return state;
}
}
const mapStateToProps = (state: State) => ({ count: state.count });
const Counter = connect(mapStateToProps)(function Counter(props: {
count: number;
dispatch: Function;
}) {
return (
<div>
<h2>Counter</h2>
<div>
<button
onClick={() => {
props.dispatch({ type: "DECREMENT" });
}}
>
-
</button>
<span data-testid="count-value">{props.count}</span>
<button
onClick={() => {
props.dispatch({ type: "INCREMENT" });
}}
>
+
</button>
</div>
</div>
);
});
// test
afterEach(cleanup);
test("click +, then count-value is 1", () => {
const store: Store<State> = createStore(reducer);
const result = render(
<Provider store={store}>
<Counter />
</Provider>
);
fireEvent.click(result.getByText("+"));
expect(result.getByTestId("count-value").textContent).toBe("1");
});
test("click -, then count-value is -1", () => {
const store: Store<State> = createStore(reducer);
const result = render(
<Provider store={store}>
<Counter />
</Provider>
);
fireEvent.click(result.getByText("+"));
expect(result.getByTestId("count-value").textContent).toBe("-1");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment