Skip to content

Commit

Permalink
test(react): Add tests for react-router createHashRouter usage. (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
onurtemizkan authored Jun 22, 2023
1 parent 54e091e commit 9fd5016
Show file tree
Hide file tree
Showing 14 changed files with 831 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

/test-results/
/playwright-report/
/playwright/.cache/

!*.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://localhost:4873
@sentry-internal:registry=http://localhost:4873
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{
"name": "react-create-hash-router-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@sentry/react": "*",
"@testing-library/jest-dom": "5.14.1",
"@testing-library/react": "13.0.0",
"@testing-library/user-event": "13.2.1",
"@types/jest": "27.0.1",
"@types/node": "16.7.13",
"@types/react": "18.0.0",
"@types/react-dom": "18.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"typescript": "4.4.2",
"web-vitals": "2.1.0"
},
"scripts": {
"build": "react-scripts build",
"start": "serve -s build",
"test": "playwright test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@playwright/test": "1.26.1",
"axios": "1.1.2",
"serve": "14.0.1"
},
"volta": {
"node": "16.19.0",
"yarn": "1.22.19"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';

/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: './tests',
/* Maximum time one test can run for. */
timeout: 60 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 5000,
},
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: 0,
/* Opt out of parallel tests on CI. */
workers: 1,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'list',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
// For now we only test Chrome!
// {
// name: 'firefox',
// use: {
// ...devices['Desktop Firefox'],
// },
// },
// {
// name: 'webkit',
// use: {
// ...devices['Desktop Safari'],
// },
// },
],

/* Run your local dev server before starting the tests */
webServer: {
command: 'pnpm start',
port: Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO),
env: {
PORT: String(Number(process.env.BASE_PORT) + Number(process.env.PORT_MODULO)),
},
},
};

export default config;
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
interface Window {
recordedTransactions?: string[];
capturedExceptionId?: string;
sentryReplayId?: string;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import * as Sentry from '@sentry/react';
import {
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
RouterProvider,
createHashRouter,
} from 'react-router-dom';
import Index from './pages/Index';
import User from './pages/User';

const replay = new Sentry.Replay();

Sentry.init({
// environment: 'qa', // dynamic sampling bias to keep transactions
dsn: process.env.REACT_APP_E2E_TEST_DSN,
integrations: [
new Sentry.BrowserTracing({
routingInstrumentation: Sentry.reactRouterV6Instrumentation(
React.useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
),
}),
replay,
],
// We recommend adjusting this value in production, or using tracesSampler
// for finer control
tracesSampleRate: 1.0,
release: 'e2e-test',

// Always capture replays, so we can test this properly
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 0.0,
});

Object.defineProperty(window, 'sentryReplayId', {
get() {
return replay['_replay'].session.id;
},
});

Sentry.addGlobalEventProcessor(event => {
if (
event.type === 'transaction' &&
(event.contexts?.trace?.op === 'pageload' || event.contexts?.trace?.op === 'navigation')
) {
const eventId = event.event_id;
if (eventId) {
window.recordedTransactions = window.recordedTransactions || [];
window.recordedTransactions.push(eventId);
}
}

return event;
});

const sentryCreateHashRouter = Sentry.wrapCreateBrowserRouter(createHashRouter);

const router = sentryCreateHashRouter([
{
path: '/',
element: <Index />,
},
{
path: '/user/:id',
element: <User />,
},
]);

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(<RouterProvider router={router} />);
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import * as React from 'react';
import * as Sentry from '@sentry/react';
import { Link } from 'react-router-dom';

const Index = () => {
return (
<>
<input
type="button"
value="Capture Exception"
id="exception-button"
onClick={() => {
const eventId = Sentry.captureException(new Error('I am an error!'));
window.capturedExceptionId = eventId;
}}
/>
<Link to="/user/5" id="navigation">
navigate
</Link>
</>
);
};

export default Index;
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';

const User = () => {
return <p>I am a blank page :)</p>;
};

export default User;
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="react-scripts" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"$schema": "../../test-recipe-schema.json",
"testApplicationName": "react-create-hash-router",
"buildCommand": "pnpm install && npx playwright install && pnpm build",
"tests": [
{
"testName": "Playwright tests",
"testCommand": "pnpm test"
}
],
"canaryVersions": [
{
"dependencyOverrides": {
"react": "latest",
"react-dom": "latest"
}
}
]
}
Loading

0 comments on commit 9fd5016

Please sign in to comment.