TypeError container.queryselectorall is not a function

[kvedantmahajan]

 "react": "^16.9.0",
 "@testing-library/jest-dom": "^4.1.2",
 "@testing-library/react": "^9.2.0",

Relevant code or config:

 test("toggles", () => {
        const { getByTestId } = render(
            <Collapse data-testid="collapse" activeKey={2}>
                <Panel panelKey={1} header="Panel Header 1">
                    Some content
                </Panel>
                <Panel panelKey={2} header="Panel Header 2">
                    Some content
                </Panel>
                <Panel panelKey={3} header="Panel Header 3" disabled>
                    Some content
                </Panel>
            </Collapse>
        );
    });

What I did

const node = getByTestId("collapse");
console.log(node);

Problem description:

Ok, data-testid is not working here as expected. It throws error below

collapse › encountered a declaration exception
TypeError: container.querySelectorAll is not a function

Here is my collapse implementation

export const Collapse = ({
	activeKey = 1,
	accordion,
	onChange,
	expandIconPosition,
	children,
	...rest
}: CollapseProps) => {
	const [key, setKey] = React.useState(activeKey);

	const closeOtherPanels = (key: string | number) => {
		setKey(key);
	};

	return (
		<CollapseContext.Provider
			value={{
				key,
				accordion,
				closeOtherPanels,
				onChange,
				expandIconPosition
			}}
		>
			<CollapseWrap {...rest}>{children}</CollapseWrap>
		</CollapseContext.Provider>
	);
};

[alexkrolick]

Are you running this with a JSDOM environment, like the one from Jest?

[kvedantmahajan]

I didn't quite follow your comment. From whatever I picked up. I use yarn unit -u which is in turn "unit": "jest", to run my tests.

In my jest.config.js

setupFilesAfterEnv: ['./jest.setup.js'],

jest.setup.js

import '@testing-library/jest-dom/extend-expect';

[kentcdodds]

Hi @kushalmahajan,

What is the implementation of CollapseWrap? If you could create a reproduction on codesandbox and post it to https://spectrum.chat/testing-library/help-react that would be helpful.

This is unlikely an issue with the library, so I'll close this here and ask you to take it over there. Thanks!

[fredbliss]

I can confirm this using your testing-javascript course code. As soon as you get to branch cypress-04, this error appears with Chrome 79 and Electron 78. @kentcdodds ... Help!

[kentcdodds]

Hi Fred, could you open a new issue on Cypress Testing Library please? And if you could screenshot the error you're seeing that would also be helpful. Thank you.

[fredbliss]

Thanks @kentcdodds! here: /testing-library/cypress-testing-library/issues/109

[kentcdodds]

Thank you!

[kvedantmahajan]

@kentcdodds I did edit for a Collapse implementation earlier. Any thoughts?

[kentcdodds]

Sorry @kushalmahajan, that still doesn't give me enough information to diagnose the issue. Please follow the instructions in https://kcd.im/rtl-help to solve this issue.

[kentcdodds]

Your getQueriesForElement call should be getQueriesForElement(root) not getQueriesForElememt("root").

Is there a reason you're not using @testing-library/react exports of render and screen? I think you'd have better success with those.