пример интеграционных тестов

.gitignore

@@ -23,3 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 test-report.html
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e/example.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from "@playwright/test";
+
+test('по адресу /about должна открываться страница "о проекте"', async ({ page }) => {
+  await page.goto("/about");
+
+  await expect(page.getByTestId('page-title')).toHaveText('About');
+});
+
+test("если добавить элемент, он появляется в списке", async ({ page }) => {
+  await page.goto("/");
+
+  await page.getByTestId("input-add").type("Сделать домашку");
+  await page.getByTestId("button-add").click();
+
+  const list = page.getByTestId("list");
+  const items = list.getByTestId("list-item");
+  const allTexts = await items.allTextContents();
+
+  await expect(allTexts).toContain("Сделать домашку");
+});

package.json

@@ -14,10 +14,11 @@
         "jest-teamcity": "^1.9.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-helmet": "^6.1.0",
         "react-redux": "^7.2.4",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-scripts": "4.0.3",
+        "react-scripts": "^5.0.1",
         "redux": "^4.1.0",
         "redux-observable": "^2.0.0",
         "rxjs": "^7.1.0",
@@ -29,6 +30,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
+        "e2e": "playwright test --project=chromium",
         "test-ci": "CI=true npm test -- --reporters=\"default\" --reporters=\"jest-html-reporter\" --reporters=\"jest-teamcity\""
     },
     "eslintConfig": {
@@ -50,6 +52,8 @@
         ]
     },
     "devDependencies": {
+        "@playwright/test": "^1.27.1",
+        "@types/react-helmet": "^6.1.5",
         "@types/react-redux": "^7.1.16",
         "@types/react-router": "^5.1.15",
         "@types/react-router-dom": "^5.1.7",

playwright.config.ts

@@ -0,0 +1,110 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./e2e",
+
+  /* Maximum time one test can run for. */
+  timeout: 30 * 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: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* 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,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    headless: false,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run start",
+    port: 3000,
+  },
+};
+
+export default config;

src/Application.test.tsx → src/example.test.tsx

@@ -10,7 +10,6 @@ import { initStore } from './store';
 import { Application } from './Application';
 import events from '@testing-library/user-event';
 
-
 it('по адресу /about должна открываться страница "о проекте"', () => {
     const history = createMemoryHistory({
         initialEntries: ['/about'],
@@ -25,14 +24,14 @@ it('по адресу /about должна открываться страниц
             </Provider>
         </Router>
     );
-    
+
     const { getByTestId } = render(application);
 
     expect(getByTestId('page-title').textContent).toEqual('About');
 });
 
 
-it('если добавить элемент, он появляется на экране', () => {
+it('если добавить элемент, он появляется в списке', () => {
     const store = initStore();
     const application = (
         <BrowserRouter>
@@ -41,14 +40,14 @@ it('если добавить элемент, он появляется на э
             </Provider>
         </BrowserRouter>
     );
-    
+
     const { getByTestId } = render(application);
     events.type(getByTestId('input-add'), 'Сделать домашку');
     events.click(getByTestId('button-add'))
-    
+
     const list = getByTestId('list');
     const items = within(list).getAllByTestId('list-item');
-    
+
     expect(items.map(el => el.textContent)).toContain('Сделать домашку');
     // screen.logTestingPlaygroundURL();
-});
+});

src/pages/About.tsx

@@ -1,10 +1,14 @@
 import { FC } from 'react';
+import { Helmet } from 'react-helmet';
 
 export const About: FC = () => {
     return (
         <>
+            <Helmet>
+                <title>About page</title>
+            </Helmet>
             <h1 data-testid="page-title">About</h1>
             <p>This is an example application.</p>
         </>
     );
-};
+};

src/pages/Home.tsx

@@ -1,13 +1,17 @@
 import { FC } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { TodoList } from '../components/TodoList';
 
 export const Home: FC = () => {
     return (
         <>
-            <h1 data-testid="page-title">Home</h1>
+            <Helmet>
+                <title>Home page</title>
+            </Helmet>
+            <h1 data-testid="page-title">Home1</h1>
             <p>This is the list.</p>
             <TodoList />
         </>
     );
-};
+};