rluvaton/README.md

## README.md

      
    Raw
  

              README.md
            
          
    queryBy* and toBeInTheDocument vs  getBy*

queryBy* and toBeInTheDocument

Test:
it('should render the component and contain the shot.name', () => {
  // Arrange
  const shot: ShotTitleProps = {
    name: faker.name.title(),
  }

  // Act
  render(<ShotTitle {...shot}/>);

  // Assert
  const shotTitleElement = screen.queryByText('shot.name');

  expect(shotTitleElement).toBeInTheDocument();
});
Error
FAIL  src/pages/showcase/components/ShotTitle/index.test.tsx (21.55 s)
  ● ShotTitle › should render the component and contain the shot.name

    expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

      19 |     const shotTitleElement = screen.queryByText('shot.name');
      20 |
    > 21 |     expect(shotTitleElement).toBeInTheDocument();
         |                              ^
      23 |   });
      24 |

      at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:342:30)
      at Object.toBeInTheDocument (node_modules/expect/build/index.js:343:15)
      at Object.<anonymous> (src/pages/showcase/components/ShotTitle/index.test.tsx:21:30)

getBy*

Test:
it('should render the component and contain the shot.name', () => {
  // Arrange
  const shot: ShotTitleProps = {
    name: faker.name.title(),
  }

  // Act
  render(<ShotTitle {...shot}/>);

  // Assert
  screen.getByText('shot.name');
});
Error
  ● ShotTitle › should render the component and contain the shot.name

    TestingLibraryElementError: Unable to find an element with the text: shot.name. 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.

    <body>
      <div>
        <div
          class="shot-title"
        >
          <div>
            <span
              class="ant-typography"
            >
              Dynamic Markets Representative
            </span>
          </div>
        </div>
      </div>
    </body>

      17 |
      18 |     // Assert
    > 19 |     screen.getByText('shot.name');
         |            ^
      20 |   });
      21 |
      22 |   it('should render the component and contain the shot.name and the link', () => {

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:90:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
      at getByText (node_modules/@testing-library/dom/dist/query-helpers.js:111:19)
      at Object.<anonymous> (src/pages/showcase/components/ShotTitle/index.test.tsx:19:12)