rambabu-patidar · July 26, 2023 17:30
diff --git a/TestingLibraryElementError.txt b/TestingLibraryElementError.txt
 Run npm test

 > [email protected] test
 > react-scripts test

 FAIL src/App.test.js
  ✕ renders learn react link (88 ms)

  ● renders learn react link

    TestingLibraryElementError: Unable to find an element with the text: /learn react/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <header
          class="header"
        >
          <h1>
            ReactMeals
          </h1>
          <button
            class="button "
          >
            <span
              class="icon"
            >
              <svg
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
                />
              </svg>
            </span>
            <span>
              Your Cart
            </span>
            <span
              class="badge"
            >
              0
            </span>
          </button>
        </header>
        <div
          class="main-image"
        >
          <img
            alt="A table full of delicious dishes!"
            src="meals.jpg"
          />
        </div>
        <main>
          <section
            class="summary"
          >
            <h2>
              Delicious Food, Delivered To You
            </h2>
            <p>
              Choose your favourite meal from our broad selection of available meals and enjoy a delicious lunch or dinner at home.
            </p>
            <p>
              All our meals are cooked with high-quality ingridents, just-in-time and of course by experienced chefs!
            </p>
          </section>
          <section
            class="meals-loading"
          >
            <p>
              Loading...
            </p>
          </section>
        </main>
      </div>
    </body>

      4 | test('renders learn react link', () => {
      5 |   render(<App />);
    > 6 |   const linkElement = screen.getByText(/learn react/i);
        |                              ^
      7 |   expect(linkElement).toBeInTheDocument();
      8 | });
      9 |

      at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at getByText (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
      at Object.<anonymous> (src/App.test.js:6:30)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

 Test Suites: 1 failed, 1 total
 Tests:       1 failed, 1 total
 Snapshots:   0 total
 Time:        1.937 s
 Ran all test suites.
 Jest did not exit one second after the test run has completed.

 This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.
 One of your dependencies, babel-preset-react-app, is importing the
 "@babel/plugin-proposal-private-property-in-object" package without
 declaring it in its dependencies. This is currently working because
 "@babel/plugin-proposal-private-property-in-object" is already in your
 node_modules folder for unrelated reasons, but it may break at any time.

 babel-preset-react-app is part of the create-react-app project, which
 is not maintianed anymore. It is thus unlikely that this bug will
 ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
 your devDependencies to work around this error. This will make this message
 go away.
  
 Error: Process completed with exit code 1.
	Run npm test

	> [email protected] test
	> react-scripts test

	FAIL src/App.test.js
	✕ renders learn react link (88 ms)

	● renders learn react link

	TestingLibraryElementError: Unable to find an element with the text: /learn react/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

	Ignored nodes: comments, script, style
	<body>
	<div>
	<header
	class="header"
	>
	<h1>
	ReactMeals
	</h1>
	<button
	class="button "
	>
	<span
	class="icon"
	>
	<svg
	fill="currentColor"
	viewBox="0 0 20 20"
	xmlns="http://www.w3.org/2000/svg"
	>
	<path
	d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
	/>
	</svg>
	</span>
	<span>
	Your Cart
	</span>
	<span
	class="badge"
	>
	0
	</span>
	</button>
	</header>
	<div
	class="main-image"
	>
	<img
	alt="A table full of delicious dishes!"
	src="meals.jpg"
	/>
	</div>
	<main>
	<section
	class="summary"
	>
	<h2>
	Delicious Food, Delivered To You
	</h2>
	<p>
	Choose your favourite meal from our broad selection of available meals and enjoy a delicious lunch or dinner at home.
	</p>
	<p>
	All our meals are cooked with high-quality ingridents, just-in-time and of course by experienced chefs!
	</p>
	</section>
	<section
	class="meals-loading"
	>
	<p>
	Loading...
	</p>
	</section>
	</main>
	</div>
	</body>

	4 \| test('renders learn react link', () => {
	5 \| render(<App />);
	> 6 \| const linkElement = screen.getByText(/learn react/i);
	\| ^
	7 \| expect(linkElement).toBeInTheDocument();
	8 \| });
	9 \|

	at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
	at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
	at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
	at getByText (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
	at Object.<anonymous> (src/App.test.js:6:30)
	at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
	at runJest (node_modules/@jest/core/build/runJest.js:404:19)
	at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
	at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

	Test Suites: 1 failed, 1 total
	Tests: 1 failed, 1 total
	Snapshots: 0 total
	Time: 1.937 s
	Ran all test suites.
	Jest did not exit one second after the test run has completed.

	This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.
	One of your dependencies, babel-preset-react-app, is importing the
	"@babel/plugin-proposal-private-property-in-object" package without
	declaring it in its dependencies. This is currently working because
	"@babel/plugin-proposal-private-property-in-object" is already in your
	node_modules folder for unrelated reasons, but it may break at any time.

	babel-preset-react-app is part of the create-react-app project, which
	is not maintianed anymore. It is thus unlikely that this bug will
	ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
	your devDependencies to work around this error. This will make this message
	go away.

	Error: Process completed with exit code 1.