(null);
107 |
108 | // If we add and then we delete - this will keep isAdding=true until the
109 | // fetcher completes it's revalidation
110 | const [isAdding, setIsAdding] = React.useState(false);
111 | React.useEffect(() => {
112 | if (navigation.formData?.get('action') === 'add') {
113 | setIsAdding(true);
114 | } else if (navigation.state === 'idle') {
115 | setIsAdding(false);
116 | formRef.current?.reset();
117 | }
118 | }, [navigation]);
119 |
120 | const items = Object.entries(todos).map(([id, todo]) => (
121 |
122 |
123 |
124 | ));
125 |
126 | return (
127 | <>
128 | Todos
129 |
130 | -
131 | Click to trigger error
132 |
133 | {items}
134 |
135 |
142 |
143 |
144 | );
145 | }
146 |
147 | interface TodoItemProps {
148 | id: string;
149 | todo: string;
150 | }
151 |
152 | function TodoListItem({ id, todo }: TodoItemProps) {
153 | const fetcher = useFetcher();
154 | const isDeleting = fetcher.formData != null;
155 |
156 | return (
157 | <>
158 | {todo}
159 |
160 |
161 |
164 |
165 |
166 | );
167 | }
168 |
169 | function Todo() {
170 | const params = useParams();
171 | const todo = useLoaderData() as string;
172 | return (
173 | <>
174 | Todo:
175 | id: {params.id}
176 | title: {todo}
177 |
178 | );
179 | }
180 |
181 | async function todoLoader({ params }: LoaderFunctionArgs) {
182 | await sleep();
183 | const todos = getTodos();
184 |
185 | if (!params.id) throw new Error('Expected params.id');
186 | const todo = todos[params.id];
187 |
188 | if (!todo) throw new Error(`Uh oh, I couldn't find a todo with id "${params.id}"`);
189 | return todo;
190 | }
191 |
192 | export const TodoListScenario = {
193 | render: () => ,
194 | parameters: {
195 | reactRouter: reactRouterParameters({
196 | location: { path: '/todos' },
197 | routing: reactRouterOutlet(
198 | {
199 | path: '/todos',
200 | loader: todoListLoader,
201 | action: todoListAction,
202 | },
203 | {
204 | path: ':id',
205 | element: ,
206 | loader: todoLoader,
207 | }
208 | ),
209 | }),
210 | },
211 | };
212 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/stories/DataRouter/Lazy.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useLoaderData } from 'react-router';
3 |
4 | import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
5 |
6 | export default {
7 | title: 'v2/DataRouter/Lazy',
8 | decorators: [withRouter],
9 | };
10 |
11 | export const LazyRouting = {
12 | render: () => {
13 | const data = useLoaderData() as { count: number };
14 | return Data from lazy loader : {data.count}
;
15 | },
16 | parameters: {
17 | reactRouter: reactRouterParameters({
18 | routing: {
19 | lazy: async () => {
20 | const { getCount } = await import('./lazy');
21 | return { loader: getCount };
22 | },
23 | },
24 | }),
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/stories/DataRouter/Loader.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link, Outlet, useLoaderData, useLocation, useRouteError } from 'react-router';
3 |
4 | import { reactRouterOutlet, reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
5 |
6 | export default {
7 | title: 'v2/DataRouter/Loader',
8 | decorators: [withRouter],
9 | };
10 |
11 | function sleep(n = 500) {
12 | return new Promise((r) => setTimeout(r, n));
13 | }
14 |
15 | function loader(response: unknown) {
16 | return async () => sleep(100).then(() => ({ foo: response }));
17 | }
18 |
19 | function DataLoader() {
20 | const data = useLoaderData() as { foo: string };
21 | return {data.foo}
;
22 | }
23 |
24 | export const RouteLoader = {
25 | render: () => ,
26 | parameters: {
27 | reactRouter: reactRouterParameters({
28 | routing: { loader: loader('Data loaded') },
29 | }),
30 | },
31 | };
32 |
33 | function DataLoaderWithOutlet() {
34 | const data = useLoaderData() as { foo: string };
35 | return (
36 |
37 |
{data.foo}
38 |
39 |
40 | );
41 | }
42 |
43 | function DataLoaderOutlet() {
44 | const data = useLoaderData() as { foo: string };
45 | return (
46 |
47 |
{data.foo}
48 |
49 | );
50 | }
51 |
52 | export const RouteAndOutletLoader = {
53 | render: () => ,
54 | parameters: {
55 | reactRouter: reactRouterParameters({
56 | routing: reactRouterOutlet(
57 | {
58 | loader: loader('Data loaded'),
59 | },
60 | {
61 | index: true,
62 | element: ,
63 | loader: loader('Outlet data loaded'),
64 | }
65 | ),
66 | }),
67 | },
68 | };
69 |
70 | export const RouteShouldNotRevalidate = {
71 | render: () => {
72 | const location = useLocation();
73 |
74 | return (
75 |
76 | {location.search}
77 |
78 | Add Search Param
79 |
80 |
Fancy error component : {error.message}
;
96 | }
97 |
98 | async function failingLoader() {
99 | throw new Error('Meh.');
100 | }
101 |
102 | export const ErrorBoundary = {
103 | render: () => ,
104 | parameters: {
105 | reactRouter: reactRouterParameters({
106 | routing: {
107 | loader: failingLoader,
108 | errorElement: ,
109 | },
110 | }),
111 | },
112 | };
113 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/stories/DataRouter/lazy.ts:
--------------------------------------------------------------------------------
1 | function sleep(n = 500) {
2 | return new Promise((r) => setTimeout(r, n));
3 | }
4 |
5 | export async function getCount() {
6 | return sleep(100).then(() => ({ count: 42 }));
7 | }
8 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/stories/DescendantRoutes.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link, Route, Routes, useParams } from 'react-router';
3 |
4 | import { reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
5 |
6 | export default {
7 | title: 'v2/DescendantRoutes',
8 | decorators: [withRouter],
9 | };
10 |
11 | function LibraryComponent() {
12 | return (
13 |
14 |
15 | Get back to the Library
16 |
17 |
Below is the Library {``}
18 |
19 | } />
20 | } />
21 |
22 |
30 |
Collection: {params.collectionId}
31 |
Below is the Collection {``}
32 |
33 | } />
34 | } />
35 | } />
36 |
37 |
44 |
Library Index
45 |
46 | -
47 | Explore collection 13
48 |
49 | -
50 | Explore collection 14
51 |
52 |
53 |
60 |
61 | -
62 | See our partner's book
63 |
64 | -
65 | Pick a book at random
66 |
67 |
68 |
77 | {isPartnerBook &&
Our partner book
}
78 | {!isPartnerBook &&
Book id: {params.bookId}
}
79 |
What a wonderful book !
80 |
Hi
,
13 | };
14 |
15 | export const PreserveComponentState = {
16 | render: ({ id }: { id: string }) => {
17 | const [count, setCount] = useState(0);
18 |
19 | return (
20 |
21 |
{id}
22 |
23 |
{count}
24 |
{location.pathname}
;
36 | },
37 | parameters: {
38 | reactRouter: reactRouterParameters({
39 | location: {
40 | path: '/books',
41 | },
42 | routing: { path: '/books' },
43 | }),
44 | },
45 | };
46 |
47 | export const DefaultLocation = {
48 | render: () => {
49 | const location = useLocation();
50 | return {location.pathname}
;
51 | },
52 | parameters: {
53 | reactRouter: reactRouterParameters({
54 | location: {
55 | pathParams: { bookId: '42' },
56 | },
57 | routing: { path: '/books/:bookId' },
58 | }),
59 | },
60 | };
61 |
62 | export const LocationPathFromFunctionStringResult = {
63 | render: () => {
64 | const location = useLocation();
65 | return {location.pathname}
;
66 | },
67 | parameters: {
68 | reactRouter: reactRouterParameters({
69 | location: {
70 | path: (inferredPath, pathParams) => {
71 | return generatePath(inferredPath, pathParams);
72 | },
73 | pathParams: { bookId: 777 },
74 | },
75 | routing: { path: '/books/:bookId' },
76 | }),
77 | },
78 | };
79 |
80 | export const LocationPathFromFunctionUndefinedResult = {
81 | render: () => {
82 | const location = useLocation();
83 | return {location.pathname}
;
84 | },
85 | parameters: {
86 | reactRouter: reactRouterParameters({
87 | location: {
88 | path: () => undefined,
89 | },
90 | routing: { path: '/books' },
91 | }),
92 | },
93 | };
94 |
95 | export const LocationPathBestGuess = {
96 | render: () => (
97 |
98 |
Story
99 | The outlet should be shown below.
100 |
101 |
102 | ),
103 | parameters: {
104 | reactRouter: reactRouterParameters({
105 | routing: reactRouterOutlet(
106 | {
107 | path: 'books',
108 | },
109 | {
110 | path: 'summary',
111 | element: I'm the outlet
,
112 | }
113 | ),
114 | }),
115 | },
116 | };
117 |
118 | export const LocationPathParams = {
119 | render: () => {
120 | const routeParams = useParams();
121 | return {JSON.stringify(routeParams)}
;
122 | },
123 | parameters: {
124 | reactRouter: reactRouterParameters({
125 | location: {
126 | path: '/book/:bookId',
127 | pathParams: {
128 | bookId: '42',
129 | },
130 | },
131 | routing: {
132 | path: '/book/:bookId',
133 | },
134 | }),
135 | },
136 | };
137 |
138 | export const LocationSearchParams = {
139 | render: () => {
140 | const [searchParams] = useSearchParams();
141 | return {JSON.stringify(Object.fromEntries(searchParams.entries()))}
;
142 | },
143 | parameters: {
144 | reactRouter: reactRouterParameters({
145 | location: {
146 | searchParams: { page: '42' },
147 | },
148 | }),
149 | },
150 | };
151 |
152 | export const LocationHash = {
153 | render: () => {
154 | const location = useLocation();
155 | return {location.hash}
;
156 | },
157 | parameters: {
158 | reactRouter: reactRouterParameters({
159 | location: {
160 | hash: 'section-title',
161 | },
162 | }),
163 | },
164 | };
165 |
166 | export const LocationState = {
167 | render: () => {
168 | const location = useLocation();
169 | return {location.state}
;
170 | },
171 | parameters: {
172 | reactRouter: reactRouterParameters({
173 | location: {
174 | state: 'location state',
175 | },
176 | }),
177 | },
178 | };
179 |
180 | export const RouteId = {
181 | render: () => {
182 | const matches = useMatches();
183 | return {JSON.stringify(matches.map((m) => m.id))}
;
184 | },
185 | parameters: {
186 | reactRouter: reactRouterParameters({
187 | routing: {
188 | id: 'SomeRouteId',
189 | },
190 | }),
191 | },
192 | };
193 |
194 | export const RoutingString = {
195 | render: () => {
196 | const location = useLocation();
197 | return {location.pathname}
;
198 | },
199 | parameters: {
200 | reactRouter: reactRouterParameters({
201 | routing: '/books',
202 | }),
203 | },
204 | };
205 |
206 | export const RoutingHandles = {
207 | render: () => {
208 | const matches = useMatches();
209 | return {JSON.stringify(matches.map((m) => m.handle))}
;
210 | },
211 | parameters: {
212 | reactRouter: reactRouterParameters({
213 | routing: reactRouterOutlet(
214 | { handle: 'Handle part 1 out of 2' },
215 | {
216 | handle: 'Handle part 2 out of 2',
217 | element: I'm the outlet.
,
218 | }
219 | ),
220 | }),
221 | },
222 | };
223 |
224 | export const RoutingOutletJSX = {
225 | render: () => ,
226 | parameters: {
227 | reactRouter: reactRouterParameters({
228 | routing: reactRouterOutlet(I'm an outlet defined by a JSX element
),
229 | }),
230 | },
231 | };
232 |
233 | export const RoutingOutletConfigObject = {
234 | render: () => ,
235 | parameters: {
236 | reactRouter: reactRouterParameters({
237 | routing: reactRouterOutlet({
238 | element: I'm an outlet defined with a config object
,
239 | }),
240 | }),
241 | },
242 | };
243 |
244 | export const MultipleStoryInjection = {
245 | render: () => {
246 | const location = useLocation();
247 | return (
248 |
249 |
{location.pathname}
250 |
Login |
Sign Up
251 |
StoryComponent
);
9 | expect(result).toEqual([]);
10 | });
11 |
12 | it('should return the same routes array if no route has useStoryElement property', () => {
13 | const routes = [
14 | { path: '/', element: },
15 | { path: '/about', element: },
16 | ];
17 | const result = injectStory(routes, StoryComponent
);
18 | expect(result).toEqual(routes);
19 | expect(result).not.toBe(routes);
20 | });
21 |
22 | it('should return the same route array if no route has children property', () => {
23 | const routes = [
24 | { path: '/', element: },
25 | { path: '/about', element: },
26 | ];
27 | const result = injectStory(routes, StoryComponent
);
28 | expect(result).toEqual(routes);
29 | });
30 |
31 | it('should inject the story in the story route object', () => {
32 | const routes = [
33 | { path: '/', element: },
34 | { path: '/about', useStoryElement: true },
35 | ];
36 | const StoryElement = StoryComponent
;
37 | const result = injectStory(routes, StoryElement);
38 | expect(result).toEqual([
39 | { path: '/', element: },
40 | { path: '/about', useStoryElement: true, element: StoryElement },
41 | ]);
42 |
43 | expect(isValidReactNode(result[1].element)).toBeTruthy();
44 | expect(result[1]).not.toBe(routes[1]);
45 | });
46 |
47 | it('should inject the story into every route with useStoryElement', () => {
48 | const routes = [
49 | { path: '/login', useStoryElement: true },
50 | { path: '/signup', useStoryElement: true },
51 | ];
52 | const StoryElement = StoryComponent
;
53 | const result = injectStory(routes, StoryElement);
54 | expect(result).toEqual([
55 | { path: '/login', useStoryElement: true, element: StoryElement },
56 | { path: '/signup', useStoryElement: true, element: StoryElement },
57 | ]);
58 |
59 | expect(isValidReactNode(result[0].element)).toBeTruthy();
60 | expect(isValidReactNode(result[1].element)).toBeTruthy();
61 | expect(result[0]).not.toBe(routes[0]);
62 | expect(result[1]).not.toBe(routes[1]);
63 | });
64 |
65 | it('should inject the story when the story route is deep', () => {
66 | const routes = [
67 | {
68 | path: '/',
69 | element: ,
70 | children: [
71 | { path: '/child1', element: },
72 | { path: '/child2', useStoryElement: true },
73 | ],
74 | },
75 | ];
76 | const result = injectStory(routes, StoryComponent
);
77 | expect(result).toEqual([
78 | {
79 | path: '/',
80 | element: ,
81 | children: [
82 | { path: '/child1', element: },
83 | expect.objectContaining({ path: '/child2', useStoryElement: true }),
84 | ],
85 | },
86 | ]);
87 |
88 | expect(isValidReactNode(result[0].children?.[1].element)).toBeTruthy();
89 | });
90 | });
91 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/suites/isValidReactNode.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { describe, it, expect } from 'vitest';
3 | import { isValidReactNode } from 'storybook-addon-remix-react-router/internals';
4 |
5 | describe('isValidReactNode', () => {
6 | it('should return true when a JSX element is given', () => {
7 | expect(isValidReactNode()).toBe(true);
8 | });
9 |
10 | it('should return true when `null` is given', () => {
11 | expect(isValidReactNode(null)).toBe(true);
12 | });
13 |
14 | it('should return true when `undefined` is given', () => {
15 | expect(isValidReactNode(undefined)).toBe(true);
16 | });
17 |
18 | it('should return true when a string is given', () => {
19 | expect(isValidReactNode('hello')).toBe(true);
20 | });
21 |
22 | it('should return true when a number is given', () => {
23 | expect(isValidReactNode(42)).toBe(true);
24 | });
25 |
26 | it('should return true when a React.Fragment is given', () => {
27 | expect(isValidReactNode(<>)).toBe(true);
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/test-utils.ts:
--------------------------------------------------------------------------------
1 | import { vi } from 'vitest';
2 |
3 | type Vi = typeof vi;
4 |
5 | export class LocalStorage {
6 | store!: Record;
7 |
8 | constructor(vi: Vi) {
9 | Object.defineProperty(this, 'store', {
10 | enumerable: false,
11 | writable: true,
12 | value: {},
13 | });
14 | Object.defineProperty(this, 'getItem', {
15 | enumerable: false,
16 | value: vi.fn((key: string) => (this.store[key] !== undefined ? this.store[key] : null)),
17 | });
18 | Object.defineProperty(this, 'setItem', {
19 | enumerable: false,
20 | // not mentioned in the spec, but we must always coerce to a string
21 | value: vi.fn((key: string, val = '') => {
22 | this.store[key] = val + '';
23 | }),
24 | });
25 | Object.defineProperty(this, 'removeItem', {
26 | enumerable: false,
27 | value: vi.fn((key: string) => {
28 | delete this.store[key];
29 | }),
30 | });
31 | Object.defineProperty(this, 'clear', {
32 | enumerable: false,
33 | value: vi.fn(() => {
34 | Object.keys(this.store).map((key: string) => delete this.store[key]);
35 | }),
36 | });
37 | Object.defineProperty(this, 'toString', {
38 | enumerable: false,
39 | value: vi.fn(() => {
40 | return '[object Storage]';
41 | }),
42 | });
43 | Object.defineProperty(this, 'key', {
44 | enumerable: false,
45 | value: vi.fn((idx) => Object.keys(this.store)[idx] || null),
46 | });
47 | } // end constructor
48 |
49 | get length() {
50 | return Object.keys(this.store).length;
51 | }
52 | // for backwards compatibility
53 | get __STORE__() {
54 | return this.store;
55 | }
56 | }
57 |
58 | export function mockLocalStorage(): void {
59 | if (!(window.localStorage instanceof LocalStorage)) {
60 | vi.stubGlobal('localStorage', new LocalStorage(vi));
61 | vi.stubGlobal('sessionStorage', new LocalStorage(vi));
62 | }
63 | }
64 |
65 | export function sleep(n = 500) {
66 | return new Promise((r) => setTimeout(r, n));
67 | }
--------------------------------------------------------------------------------
/tests/reactRouterV7/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "allowSyntheticDefaultImports": true,
5 | "baseUrl": ".",
6 | "esModuleInterop": true,
7 | "experimentalDecorators": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "resolveJsonModule": true,
11 | "jsx": "react",
12 | "lib": ["es2020", "dom", "dom.iterable"],
13 | "module": "esnext",
14 | "moduleResolution": "bundler",
15 | "noImplicitAny": true,
16 | "noUncheckedIndexedAccess": false,
17 | "skipLibCheck": true,
18 | "target": "esnext"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/utils.ts:
--------------------------------------------------------------------------------
1 | export function invariant(value: boolean, message?: string): asserts value;
2 | export function invariant(value: T | null | undefined, message?: string): asserts value is T;
3 | export function invariant(value: any, message?: string) {
4 | if (value === false || value === null || typeof value === 'undefined') {
5 | console.warn('Test invariant failed:', message);
6 | throw new Error(message);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react';
3 |
4 | export default defineConfig({
5 | plugins: [react()],
6 | });
7 |
--------------------------------------------------------------------------------
/tests/reactRouterV7/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineProject } from 'vitest/config';
2 |
3 | export default defineProject({
4 | test: {
5 | globals: true,
6 | environment: 'happy-dom',
7 | restoreMocks: true,
8 | unstubEnvs: true,
9 | unstubGlobals: true,
10 | setupFiles: ['./setupTests.ts'],
11 | testTimeout: 20000,
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 |
3 | export default defineConfig({
4 | test: {
5 | workspace: './vitest.workspace.ts',
6 | sequence: {
7 | setupFiles: 'list',
8 | hooks: 'stack',
9 | },
10 | reporters: ['default', 'html'],
11 | outputFile: {
12 | html: './tests-report/index.html',
13 | },
14 | },
15 | });
16 |
--------------------------------------------------------------------------------
/vitest.workspace.ts:
--------------------------------------------------------------------------------
1 | import { defineWorkspace } from 'vitest/config';
2 |
3 | export default defineWorkspace(['packages/*/vitest.config.ts', 'tests/*/vitest.config.ts']);
4 |
--------------------------------------------------------------------------------