search

nimblehq / react-templates

Our optimized React bolierplate used in our projects
https://nimblehq.co
MIT License
15 stars 2 forks source link

Fix: The sample test case `HomeScreen > renders learn react link` runs failed #165

Closed manh-t closed 1 year ago

manh-t commented 1 year ago

Issue

After initializing a new application by following the README.md instruction, running npm test didn't pass all tests.

Log:

 FAIL  src/screens/Home/index.test.tsx
  ● HomeScreen › renders learn react link

    TestingLibraryElementError: Unable to find an element by: [data-testid="app-link"]

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          class="app"
        >
          <header
            class="app-header"
          >
            <img
              alt="logo"
              class="app-logo"
              src="logo.svg"
            />
            <p>
              sample_page.message
            </p>
            <a
              class="app-link"
              data-test-id="app-link"
              href="https://reactjs.org"
              rel="noopener noreferrer"
              target="_blank"
            >
              sample_page.learn_react
            </a>
          </header>
        </div>
      </div>
    </body>

       9 |     render(<HomeScreen />);
      10 |
    > 11 |     const linkElement = screen.getByTestId('app-link');
         |                                ^
      12 |
      13 |     expect(linkElement).toBeInTheDocument();
      14 |     expect(linkElement).toHaveTextContent('sample_page.learn_react');

      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 getByTestId (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
      at Object.<anonymous> (src/screens/Home/index.test.tsx:11:32)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 3 passed, 4 total
Snapshots:   0 total
Time:        0.979 s, estimated 1 s
Ran all test suites.

Expected

All test suites should pass.

Steps to reproduce

  1. Generate a new application by running the commands in README.md
  2. Run the command npm test
  3. Observe the result.