diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..b8f5906 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,8 @@ +module.exports = { + roots: ["/src"], + transform: { + "^.+\\.tsx?$": "ts-jest" + }, + testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$", + moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"] +}; diff --git a/package.json b/package.json index 5971031..32856bd 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "devDependencies": { "husky": "^1.3.1", "lint-staged": "^8.1.5", + "react-testing-library": "^6.1.2", "stylelint": "^9.10.1", "stylelint-config-recommended-scss": "^3.2.0", "stylelint-scss": "^3.5.4" diff --git a/src/App.test.tsx b/src/App.test.tsx index 23c181f..fec75c0 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,9 +1,36 @@ +import { ConnectedRouter } from "connected-react-router"; +import { createMemoryHistory } from "history"; import React from "react"; -import ReactDOM from "react-dom"; +import { Provider } from "react-redux"; +import { withRouter } from "react-router"; +import { cleanup, render } from "react-testing-library"; import App from "./App"; +import store from "./store/createStore"; -it("renders without crashing", () => { - const div = document.createElement("div"); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); +afterEach(cleanup); + +jest.mock("react-ga"); + +function renderWithRouter( + ui: any, + { + route = "/", + history = createMemoryHistory({ initialEntries: [route] }) + } = {} +) { + return { + ...render( + + {ui} + + ), + // adding `history` to the returned utilities to allow us + // to reference it in our tests (just try to avoid using + // this to test implementation details). + history + }; +} +test("App renders without crashing", () => { + const { container } = renderWithRouter(); + expect(container).toMatchSnapshot(); }); diff --git a/src/components/FixMeNavbar/FixMeNavbar.tsx b/src/components/FixMeNavbar/FixMeNavbar.tsx index 47217e7..0a94022 100644 --- a/src/components/FixMeNavbar/FixMeNavbar.tsx +++ b/src/components/FixMeNavbar/FixMeNavbar.tsx @@ -1,6 +1,6 @@ import React from "react"; import { OutboundLink } from "react-ga"; -import { FaFacebook, FaGithub, FaTwitter } from 'react-icons/fa'; +import { FaFacebook, FaGithub, FaTwitter } from "react-icons/fa"; import { NavLink } from "react-router-dom"; import { Collapse, Nav, Navbar, NavbarToggler, NavItem } from "reactstrap"; import Logo from "./logo-fixme.svg"; @@ -12,7 +12,7 @@ export interface IFixMeNavbarState { export default class FixMeNavbar extends React.Component< { white?: boolean }, IFixMeNavbarState - > { +> { public readonly state = { isOpen: false }; @@ -30,7 +30,10 @@ export default class FixMeNavbar extends React.Component< FixMe - +