Skip to content

Commit

Permalink
Consistently wrap all tests in act()
Browse files Browse the repository at this point in the history
  • Loading branch information
@mjackson
mjackson committed Oct 29, 2021
1 parent c992312 commit 67f345b
Show file tree
Hide file tree
Showing 31 changed files with 1,468 additions and 1,123 deletions.
643 changes: 368 additions & 275 deletions packages/react-router-dom/__tests__/link-href-test.tsx
View file

Large diffs are not rendered by default.

313 changes: 173 additions & 140 deletions packages/react-router-dom/__tests__/nav-link-active-test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
import * as React from "react";
import { create as createTestRenderer } from "react-test-renderer";
import * as TestRenderer from "react-test-renderer";
import { MemoryRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";

describe("NavLink", () => {
describe("when it does not match", () => {
it("does not apply an 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route
path="/home"
element={<NavLink to="somewhere-else">Somewhere else</NavLink>}
/>
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route
path="/home"
element={<NavLink to="somewhere-else">Somewhere else</NavLink>}
/>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -24,39 +27,45 @@ describe("NavLink", () => {

describe("when it matches to the end", () => {
it("applies the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route path="/home" element={<NavLink to=".">Home</NavLink>} />
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route path="/home" element={<NavLink to=".">Home</NavLink>} />
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

expect(anchor.props.className).toMatch("active");
});

it("applies its className correctly when provided as a function", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route
path="/home"
element={
<NavLink
to="."
className={({ isActive }) =>
"nav-link" + (isActive ? " highlighted" : " plain")
}
>
Home
</NavLink>
}
/>
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route
path="/home"
element={
<NavLink
to="."
className={({ isActive }) =>
"nav-link" + (isActive ? " highlighted" : " plain")
}
>
Home
</NavLink>
}
/>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -66,25 +75,28 @@ describe("NavLink", () => {
});

it("applies its style correctly when provided as a function", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route
path="/home"
element={
<NavLink
to="."
style={({ isActive }) =>
isActive ? { textTransform: "uppercase" } : {}
}
>
Home
</NavLink>
}
/>
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home"]}>
<Routes>
<Route
path="/home"
element={
<NavLink
to="."
style={({ isActive }) =>
isActive ? { textTransform: "uppercase" } : {}
}
>
Home
</NavLink>
}
/>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -94,23 +106,26 @@ describe("NavLink", () => {

describe("when it matches a partial URL segment", () => {
it("does not apply the 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/home/children"]}>
<Routes>
<Route
path="home"
element={
<div>
<NavLink to="child">Home</NavLink>
<Outlet />
</div>
}
>
<Route path="children" element={<div>Child</div>} />
</Route>
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home/children"]}>
<Routes>
<Route
path="home"
element={
<div>
<NavLink to="child">Home</NavLink>
<Outlet />
</div>
}
>
<Route path="children" element={<div>Child</div>} />
</Route>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -120,41 +135,16 @@ describe("NavLink", () => {

describe("when it matches just the beginning but not to the end", () => {
it("applies the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/home/child"]}>
<Routes>
<Route
path="home"
element={
<div>
<NavLink to=".">Home</NavLink>
<Outlet />
</div>
}
>
<Route path="child" element={<div>Child</div>} />
</Route>
</Routes>
</MemoryRouter>
);

let anchor = renderer.root.findByType("a");

expect(anchor.props.className).toMatch("active");
});

describe("when end=true", () => {
it("does not apply the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home/child"]}>
<Routes>
<Route
path="home"
element={
<div>
<NavLink to="." end={true}>
Home
</NavLink>
<NavLink to=".">Home</NavLink>
<Outlet />
</div>
}
Expand All @@ -164,6 +154,37 @@ describe("NavLink", () => {
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

expect(anchor.props.className).toMatch("active");
});

describe("when end=true", () => {
it("does not apply the default 'active' className to the underlying <a>", () => {
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/home/child"]}>
<Routes>
<Route
path="home"
element={
<div>
<NavLink to="." end={true}>
Home
</NavLink>
<Outlet />
</div>
}
>
<Route path="child" element={<div>Child</div>} />
</Route>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -174,13 +195,16 @@ describe("NavLink", () => {

describe("when it matches without matching case", () => {
it("applies the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/Home"]}>
<Routes>
<Route path="home" element={<NavLink to=".">Home</NavLink>} />
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/Home"]}>
<Routes>
<Route path="home" element={<NavLink to=".">Home</NavLink>} />
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -189,20 +213,23 @@ describe("NavLink", () => {

describe("when caseSensitive=true", () => {
it("does not apply the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter initialEntries={["/Home"]}>
<Routes>
<Route
path="home"
element={
<NavLink to="/home" caseSensitive={true}>
Home
</NavLink>
}
/>
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter initialEntries={["/Home"]}>
<Routes>
<Route
path="home"
element={
<NavLink to="/home" caseSensitive={true}>
Home
</NavLink>
}
/>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -215,16 +242,19 @@ describe("NavLink", () => {
describe("NavLink under a Routes with a basename", () => {
describe("when it does not match", () => {
it("does not apply the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter basename="/app" initialEntries={["/app/home"]}>
<Routes>
<Route
path="home"
element={<NavLink to="somewhere-else">Somewhere else</NavLink>}
/>
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter basename="/app" initialEntries={["/app/home"]}>
<Routes>
<Route
path="home"
element={<NavLink to="somewhere-else">Somewhere else</NavLink>}
/>
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand All @@ -234,13 +264,16 @@ describe("NavLink under a Routes with a basename", () => {

describe("when it matches", () => {
it("applies the default 'active' className to the underlying <a>", () => {
let renderer = createTestRenderer(
<MemoryRouter basename="/app" initialEntries={["/app/home"]}>
<Routes>
<Route path="home" element={<NavLink to=".">Home</NavLink>} />
</Routes>
</MemoryRouter>
);
let renderer: TestRenderer.ReactTestRenderer;
TestRenderer.act(() => {
renderer = TestRenderer.create(
<MemoryRouter basename="/app" initialEntries={["/app/home"]}>
<Routes>
<Route path="home" element={<NavLink to=".">Home</NavLink>} />
</Routes>
</MemoryRouter>
);
});

let anchor = renderer.root.findByType("a");

Expand Down

0 comments on commit 67f345b

Please sign in to comment.