question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

screen.container undefined

See original GitHub issue

caused by https://github.com/testing-library/eslint-plugin-testing-library/pull/150

@testing-library/react@10.2.1
@testing-library/jest-dom@5.9.0
import { render, screen } from '@testing-library/react'


const { container } = render(
  <CampaignShowRoot />
)

console.log('container from render', container)
console.log('screen', screen)

container from render <ref *2> HTMLDivElement {
      '__reactContainere$rmnm68iqjt': <ref *1> FiberNode {
        tag: 3,
        key: null,
        elementType: null,
        type: null,
        stateNode: FiberRootNode {
          tag: 0,
          current: [Circular *1],
          containerInfo: [Circular *2],
          pendingChildren: null,
          pingCache: null,
          finishedExpirationTime: 0,
          finishedWork: null,
          timeoutHandle: -1,
          context: {},
          pendingContext: null,
          hydrate: false,
          callbackNode: null,
          callbackPriority: 90,
          firstPendingTime: 0,
          firstSuspendedTime: 0,
          lastSuspendedTime: 0,
          nextKnownPendingLevel: 0,
          lastPingedTime: 0,
          lastExpiredTime: 0,
          interactionThreadID: 1,
          memoizedInteractions: Set(0) {},
          pendingInteractionMap: Map(0) {},
          callbackExpirationTime: 0
        },
        return: null,
        child: FiberNode {
          tag: 1,
          key: null,
          elementType: [Function],
          type: [Function],
          stateNode: [MemoryRouter],
          return: [Circular *1],
          child: [FiberNode],
          sibling: null,
          index: 0,
          ref: null,
          pendingProps: [Object],
          memoizedProps: [Object],
          updateQueue: [Object],
          memoizedState: null,
          dependencies: null,
          mode: 0,
          effectTag: 0,
          nextEffect: null,
          firstEffect: [FiberNode],
          lastEffect: [FiberNode],
          expirationTime: 0,
          childExpirationTime: 0,
          alternate: [FiberNode],
          actualDuration: 0,
          actualStartTime: -1,
          selfBaseDuration: 0,
          treeBaseDuration: 0,
          _debugID: 4,
          _debugIsCurrentlyTiming: false,
          _debugSource: [Object],
          _debugOwner: null,
          _debugNeedsRemount: false,
          _debugHookTypes: null
        },
        sibling: null,
        index: 0,
        ref: null,
        pendingProps: null,
        memoizedProps: null,
        updateQueue: {
          baseState: [Object],
          baseQueue: null,
          shared: [Object],
          effects: null
        },
        memoizedState: { element: [Object] },
        dependencies: null,
        mode: 0,
        effectTag: 0,
        nextEffect: null,
        firstEffect: FiberNode {
          tag: 1,
          key: null,
          elementType: [Function: a],
          type: [Function: a],
          stateNode: null,
          return: null,
          child: null,
          sibling: null,
          index: 0,
          ref: null,
          pendingProps: null,
          memoizedProps: null,
          updateQueue: null,
          memoizedState: null,
          dependencies: null,
          mode: 0,
          effectTag: 8,
          nextEffect: null,
          firstEffect: null,
          lastEffect: null,
          expirationTime: 0,
          childExpirationTime: 0,
          alternate: null,
          actualDuration: 0,
          actualStartTime: -1,
          selfBaseDuration: 0,
          treeBaseDuration: 0,
          _debugID: 1535,
          _debugIsCurrentlyTiming: false,
          _debugSource: [Object],
          _debugOwner: [FiberNode],
          _debugNeedsRemount: false,
          _debugHookTypes: null
        },
        lastEffect: FiberNode {
          tag: 5,
          key: null,
          elementType: 'div',
          type: 'div',
          stateNode: [HTMLDivElement],
          return: [FiberNode],
          child: [FiberNode],
          sibling: null,
          index: 0,
          ref: null,
          pendingProps: [Object],
          memoizedProps: [Object],
          updateQueue: null,
          memoizedState: null,
          dependencies: null,
          mode: 0,
          effectTag: 0,
          nextEffect: null,
          firstEffect: null,
          lastEffect: null,
          expirationTime: 0,
          childExpirationTime: 0,
          alternate: null,
          actualDuration: 0,
          actualStartTime: -1,
          selfBaseDuration: 0,
          treeBaseDuration: 0,
          _debugID: 1693,
          _debugIsCurrentlyTiming: false,
          _debugSource: [Object],
          _debugOwner: [FiberNode],
          _debugNeedsRemount: false,
          _debugHookTypes: null
        },
        expirationTime: 0,
        childExpirationTime: 0,
        alternate: FiberNode {
          tag: 3,
          key: null,
          elementType: null,
          type: null,
          stateNode: [FiberRootNode],
          return: null,
          child: [FiberNode],
          sibling: null,
          index: 0,
          ref: null,
          pendingProps: null,
          memoizedProps: null,
          updateQueue: [Object],
          memoizedState: [Object],
          dependencies: null,
          mode: 0,
          effectTag: 0,
          nextEffect: null,
          firstEffect: [FiberNode],
          lastEffect: [FiberNode],
          expirationTime: 0,
          childExpirationTime: 1073741823,
          alternate: [Circular *1],
          actualDuration: 0,
          actualStartTime: -1,
          selfBaseDuration: 0,
          treeBaseDuration: 0,
          _debugID: 1,
          _debugIsCurrentlyTiming: false,
          _debugSource: null,
          _debugOwner: null,
          _debugNeedsRemount: false,
          _debugHookTypes: null
        },
        actualDuration: 0,
        actualStartTime: -1,
        selfBaseDuration: 0,
        treeBaseDuration: 0,
        _debugID: 1,
        _debugIsCurrentlyTiming: false,
        _debugSource: null,
        _debugOwner: null,
        _debugNeedsRemount: false,
        _debugHookTypes: null
      },
      _reactRootContainer: ReactDOMBlockingRoot {
        _internalRoot: FiberRootNode {
          tag: 0,
          current: [FiberNode],
          containerInfo: [Circular *2],
          pendingChildren: null,
          pingCache: null,
          finishedExpirationTime: 0,
          finishedWork: null,
          timeoutHandle: -1,
          context: {},
          pendingContext: null,
          hydrate: false,
          callbackNode: null,
          callbackPriority: 90,
          firstPendingTime: 0,
          firstSuspendedTime: 0,
          lastSuspendedTime: 0,
          nextKnownPendingLevel: 0,
          lastPingedTime: 0,
          lastExpiredTime: 0,
          interactionThreadID: 1,
          memoizedInteractions: Set(0) {},
          pendingInteractionMap: Map(0) {},
          callbackExpirationTime: 0
        }
      },
      [Symbol(SameObject caches)]: [Object: null prototype] {
        attributes: NamedNodeMap {},
        childNodes: NodeList {}
      }
    }

      at Object.<anonymous> (app/javascript/__tests__/sites/campaigns/campaign_show/campaign_details_render.test.js:437:17)

  console.log
    screen {
      debug: [Function: debug],
      queryAllByLabelText: [Function: bound ],
      queryByLabelText: [Function: bound ],
      getAllByLabelText: [Function: bound ],
      getByLabelText: [Function: bound ],
      findAllByLabelText: [Function: bound ],
      findByLabelText: [Function: bound ],
      queryByPlaceholderText: [Function: bound ],
      queryAllByPlaceholderText: [Function: bound ],
      getByPlaceholderText: [Function: bound ],
      getAllByPlaceholderText: [Function: bound ],
      findAllByPlaceholderText: [Function: bound ],
      findByPlaceholderText: [Function: bound ],
      queryByText: [Function: bound ],
      queryAllByText: [Function: bound ],
      getByText: [Function: bound ],
      getAllByText: [Function: bound ],
      findAllByText: [Function: bound ],
      findByText: [Function: bound ],
      queryByDisplayValue: [Function: bound ],
      queryAllByDisplayValue: [Function: bound ],
      getByDisplayValue: [Function: bound ],
      getAllByDisplayValue: [Function: bound ],
      findAllByDisplayValue: [Function: bound ],
      findByDisplayValue: [Function: bound ],
      queryByAltText: [Function: bound ],
      queryAllByAltText: [Function: bound ],
      getByAltText: [Function: bound ],
      getAllByAltText: [Function: bound ],
      findAllByAltText: [Function: bound ],
      findByAltText: [Function: bound ],
      queryByTitle: [Function: bound ],
      queryAllByTitle: [Function: bound ],
      getByTitle: [Function: bound ],
      getAllByTitle: [Function: bound ],
      findAllByTitle: [Function: bound ],
      findByTitle: [Function: bound ],
      queryByRole: [Function: bound ],
      queryAllByRole: [Function: bound ],
      getAllByRole: [Function: bound ],
      getByRole: [Function: bound ],
      findAllByRole: [Function: bound ],
      findByRole: [Function: bound ],
      queryByTestId: [Function: bound ],
      queryAllByTestId: [Function: bound ],
      getByTestId: [Function: bound ],
      getAllByTestId: [Function: bound ],
      findAllByTestId: [Function: bound ],
      findByTestId: [Function: bound ]
    }

screen doesn’t have container key

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
Belco90commented, Jun 11, 2020

@timdeschryver I think we need its own no-container rule or however it will be called, but something outside prefer-screen-queries.

1reaction
nickmccurdycommented, Jun 17, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

React Testing Library: how to use screen in this case instead ...
I have a component, where I need to test the text that is rendered. The top level container in this component is a...
Read more >
API | Testing Library
Render into a container which is appended to document.body . ... NOTE: It's recommended to use screen.debug instead.
Read more >
React Navigation | React Native Testing Library - Open Source
On tap of any of these items will move to the details screen with the item number: ... import { NavigationContainer } from...
Read more >
Common mistakes with React Testing Library - Kent C. Dodds
Common mistakes with React Testing Library · Not using Testing Library ESLint plugins · Using wrapper as the variable name for the return...
Read more >
CloudVision - Network Provisioning View - Arista
This will return it to the undefined container on the provisioning screen. Remove Removes the switch from CVP. This stops CVP making changes...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found