javascript - Attempts to check for element not existing with React Testing Library always failing - Stack Overflow

admin管理员组

文章数量:1356934

I have a ponent which in some circumstances should render nothing (it just returns null). It looks something like this:

const MyComponent = ({ renderNothing }) => {
    if (renderNothing) {
        return null
    }
    return <div data-testid='my-ponent'>Stuff</div>
}

I would like to test that when in fact renderNothing is true, that the element with the data-testid of my-ponent does not exist. My current test looks something like this:

  it.only('should not render MyComponent when renderNothing is true ', async () => {
    render(<MyComponent renderNothing={true}/>)
    const myComponent = screen.getByTestId('my-ponent')
    expect(myComponent).not.toBeInTheDocument()
  });

Unfortunately this test always fails with the following message:

TestingLibraryElementError: Unable to find an element by: [data-testid="my-ponent"]

Is there a way to successfully do this check without triggering the error?

I have a ponent which in some circumstances should render nothing (it just returns null). It looks something like this:

const MyComponent = ({ renderNothing }) => {
    if (renderNothing) {
        return null
    }
    return <div data-testid='my-ponent'>Stuff</div>
}

I would like to test that when in fact renderNothing is true, that the element with the data-testid of my-ponent does not exist. My current test looks something like this:

  it.only('should not render MyComponent when renderNothing is true ', async () => {
    render(<MyComponent renderNothing={true}/>)
    const myComponent = screen.getByTestId('my-ponent')
    expect(myComponent).not.toBeInTheDocument()
  });

Unfortunately this test always fails with the following message:

TestingLibraryElementError: Unable to find an element by: [data-testid="my-ponent"]

Is there a way to successfully do this check without triggering the error?

• javascript
• reactjs
• jestjs
• react-testing-library

Share Improve this question Follow asked Jul 5, 2021 at 15:19 theJulstheJuls 7,4901919 gold badges9696 silver badges182182 bronze badges 1

• 2 use queryByTestId testing-library./docs/vue-testing-library/cheatsheet – Noriller Commented Jul 5, 2021 at 15:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

From the docs Types of Queries:

getBy...: Returns the matching node for a query, and throws a descriptive error if no elements match or if more than one match is found (use getAllBy instead if more than one element is expected).

queryBy...: Returns the matching node for a query, and returns null if no elements match. This is useful for asserting an element that is not present. Throws an error if more than one match is found (use queryAllBy instead if this is OK).

You should use queryByTestId() method.

E.g.

index.tsx:

import React from 'react';

export const MyComponent = ({ renderNothing }) => {
  if (renderNothing) {
    return null;
  }
  return <div data-testid="my-ponent">Stuff</div>;
};

index.test.tsx:

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { MyComponent } from './';

describe('68258524', () => {
  it('should pass', () => {
    render(<MyComponent renderNothing={true} />);
    const myComponent = screen.queryByTestId('my-ponent');
    expect(myComponent).not.toBeInTheDocument();
  });
});

test result:

 PASS  examples/68258524/index.test.tsx (10.749 s)
  68258524
    ✓ should pass (23 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |   83.33 |       50 |     100 |      80 |                   
 index.tsx |   83.33 |       50 |     100 |      80 | 7                 
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.256 s

本文标签：