@@ -40,8 +40,7 @@ let appFixture: AppFixture;
40
40
// Now try running this test:
41
41
//
42
42
// ```
43
- // pnpm test:integration bug-report --project chromium
44
- // ```
43
+ // pnpm test:integration bug-report --project chromium ```
45
44
//
46
45
// You can add `--watch` to the end to have it re-run on file changes:
47
46
//
@@ -64,27 +63,36 @@ test.beforeAll(async () => {
64
63
// `createFixture` will make an app and run your tests against it.
65
64
////////////////////////////////////////////////////////////////////////////
66
65
files : {
67
- "app/routes/_index.tsx" : js `
68
- import { useLoaderData, Link } from "react-router";
69
-
70
- export function loader() {
71
- return "pizza";
66
+ "api/auth/me" : js `
67
+ export const loader = async () => {
68
+ await new Promise((resolve) => setTimeout(resolve, 500));
69
+ return { user: { name: "Michael" } };
72
70
}
71
+ ` ,
72
+ "app/routes/_index.tsx" : js `
73
+ import { Link } from "react-router";
73
74
74
75
export default function Index() {
75
- let data = useLoaderData();
76
76
return (
77
77
<div>
78
- {data}
79
78
<Link to="/burgers">Other Route</Link>
80
79
</div>
81
80
)
82
81
}
83
82
` ,
84
83
85
84
"app/routes/burgers.tsx" : js `
85
+ import * as React from "react";
86
+ import { useFetcher } from "react-router";
87
+
86
88
export default function Index() {
87
- return <div>cheeseburger</div>;
89
+ const fetcher = useFetcher();
90
+ React.useEffect(() => {
91
+ if (fetcher.state === "idle") {
92
+ fetcher.load("/api/auth/me");
93
+ }
94
+ }, []);
95
+ return (<h1>{fetcher.data ? fetcher.data.user.name : "loading..."}</h1>);
88
96
}
89
97
` ,
90
98
} ,
@@ -103,16 +111,19 @@ test.afterAll(() => {
103
111
// add a good description for what you expect React Router to do 👇🏽
104
112
////////////////////////////////////////////////////////////////////////////////
105
113
106
- test ( "[description of what you expect it to do] " , async ( { page } ) => {
114
+ test ( "I expect this page to not 404 " , async ( { page } ) => {
107
115
let app = new PlaywrightFixture ( appFixture , page ) ;
108
116
// You can test any request your app might get using `fixture`.
109
- let response = await fixture . requestDocument ( "/" ) ;
110
- expect ( await response . text ( ) ) . toMatch ( "pizza" ) ;
117
+ // let response = await fixture.requestDocument("/");
111
118
112
119
// If you need to test interactivity use the `app`
113
120
await app . goto ( "/" ) ;
114
121
await app . clickLink ( "/burgers" ) ;
115
- await page . waitForSelector ( "text=cheeseburger" ) ;
122
+
123
+ // expect that the page will not 404
124
+ expect ( await page . textContent ( "h1" ) ) . not . toBe ( "404 Not Found" ) ;
125
+
126
+ // await page.waitForSelector("text=Michael");
116
127
117
128
// If you're not sure what's going on, you can "poke" the app, it'll
118
129
// automatically open up in your browser for 20 seconds, so be quick!
0 commit comments