screen.container undefined

[pustovalov]

caused by #150

@testing-library/[email protected]
@testing-library/[email protected]

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

[Belco90]

Hi Pavel, thanks for opening this issue. Damn, we tried to fix something doesn’t even exist. I’ll take care of this one tomorrow morning.

[gndelia]

Reviewing the original issue, the problem seems to be that container is not exposed in screen - it only exposes the bound queries + debug.

In that case then we should allow the render result to use the container, as there's no other way to access it.

[Belco90]

Yep, I just assumed container was available under screen but it isn’t. Better to double check the docs next time.

Should be easy just to revert that fix.

[gndelia]

I will create a PR just reverting that one

[gndelia]

created!

[timdeschryver]

that makes sense 🤦‍♂️😅

Not sure if you should allow render to use container tho. https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-container-to-query-for-elements

[Belco90]

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

[Belco90]

🎉 This issue has been resolved in version 3.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[timdeschryver]

I agree @Belco90 , that's what I also meant to say

[nickserv]

@timdeschryver @Belco90 #171