bonnie

{
  "parser": "@typescript-eslint/parser",
  "extends": ["airbnb", "prettier", "next"],
  "plugins": [
    "testing-library",
    "jest-dom",
    "jsx-a11y",
    "simple-import-sort",
    "prettier",
    "react-hooks"

bonnie

import { EnhancedStore } from "@reduxjs/toolkit"; // for redux-toolkit
// import { Store } from 'redux' // for non-toolkit
import {
  render as rtlRender,
  RenderOptions,
  RenderResult,
} from "@testing-library/react";
import { ReactElement, ReactNode } from "react";
import { Provider } from "react-redux";

bonnie

const MemoryRouterWithInitialRoutes = ({ children, initialRoutes }) => {
  return (
    <MemoryRouter initialEntries={initialRoutes}>
      {children}
    </MemoryRouter>
  );
};

bonnie

const initialRoutes =
  options && options.initialRoutes ? options.initialRoutes : ["/"];

bonnie

return render(ui, {
  wrapper: (args) =>
    MemoryRouterWithInitialRoutes({
      ...args,
      initialRoutes,
    }),
    ...options,
});

bonnie

const MemoryRouterWithInitialRoutes = ({ children }) =>
  <MemoryRouter>{children}</MemoryRouter>;

const customRender = (ui, options) => {
  return render(
    ui,
    {
      wrapper: MemoryRouterWithInitialRoutes,
      ...options
    }

bonnie

import { render } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";

// create a customRender that wraps the UI in a memory Router
const customRender = (ui, options) => {
  return render(ui, { wrapper: MemoryRouter, ...options });
}

// re-export everything
export * from "@testing-library/react";

bonnie

import { render } from "@testing-library/react";
import Locations from "./Locations";

test("renders without error", () => {
  render(<Locations />);
});

bonnie

import { useParams, Link } from "react-router-dom";

export default function Locations() {
// We can use the `useParams` hook here to access
// the dynamic pieces of the URL.
const { id } = useParams();// in a real app, this info would come from the server
  
const locationData = {
  "san-francisco": {
    name: "San Francisco",

bonnie

import { Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Menus from "./Menus";
import Locations from "./Locations";
import About from "./About";export default function App() {
  return (
    <div>
      <nav>
        <Link to="/">Our Restaurant</Link>
        <Link to="/menus">Menus</Link>