- https://create-react-app.dev/docs/getting-started/
npx create-react-app
- https://create-react-app.dev/docs/adding-a-router/
npm install --save react-router-dom
import { BrowserRouter } from "react-router-dom";
inindex.js
- Use
<BrowserRouter><App /></BrowserRouter>
in render method import { useLocation } from 'react-router-dom';
inApp.js
- Use
const { hash } = useLocation(); const hashValue = (hash && hash.replace("#", "")) || undefined;
and AppendLearn React {hashValue}
to render the hash, if any import { BrowserRouter, MemoryRouter } from "react-router-dom";
inApp.test.js
- Update existing test with
render(<App />, { wrapper: BrowserRouter });
- Replicate test with hash value:
test("renders learn react link with hash value", () => {
render(
<MemoryRouter initialEntries={[{ pathname: "/", hash: "#hash" }]}>
<App />
</MemoryRouter>
);
const linkElement = screen.getByText(/learn react hash/i);
expect(linkElement).toBeInTheDocument();
});
- Running the test fails NOT!