Revert "feat(): Now supporting all RTL queries"

This reverts commit ddfb3ba.

Author: prowe

package-lock.json

@@ -36,13 +36,15 @@
   "devDependencies": {
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.38",
     "babel-jest": "^27.4.5",
     "jest": "^27.4.5",
     "react": "^17.0.2",
     "react-test-renderer": "^17.0.2",
+    "ts-jest": "^27.1.2",
     "typescript": "^4.5.4"
   },
   "peerDependencies": {
@@ -51,7 +53,11 @@
     "@testing-library/react": "*"
   },
   "jest": {
-    "testEnvironment": "jest-environment-jsdom"
+    "testEnvironment": "jest-environment-jsdom",
+    "preset": "ts-jest",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/jest-setup.ts"
+    ]
   },
   "release": {
     "branches": ["master"]

package.json

@@ -0,0 +1,11 @@
+import { setupMockComponent } from './index';
+import MockedComponent from './test-components/MockedComponent';
+
+it('should throw an exception if the component is not a mock', () => {
+    expect.assertions(1);
+    try {
+        setupMockComponent(MockedComponent);
+    } catch (err: any) {
+        expect(err.message).toEqual("MockedComponent cannot be setup because it is not a Jest mock. Call \"jest.mock('path/to/component')\" first");
+    }
+});

src/bad-setup.spec.tsx

@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react';
+import React, { useEffect, useState } from 'react';
+import { setupMockComponent, getByMockComponent } from './index';
+import { findAllByMockComponent, findByMockComponent, getAllByMockComponent, queryAllByMockComponent, queryByMockComponent } from './queries';
+import MockedComponent from './test-components/MockedComponent';
+
+jest.mock('./test-components/MockedComponent');
+
+const TestedComponent = ({value}: {value: string}) => {
+    return (
+        <div>
+            <MockedComponent value={value}/>
+        </div>
+    );
+};
+
+beforeEach(() => {
+    setupMockComponent(MockedComponent);
+});
+
+it('should render a div', () => {
+    render(<TestedComponent value='val' />);
+
+    expect(getByMockComponent(MockedComponent).tagName).toEqual('DIV');
+});
+
+it('should have the prop held', () => {
+    render(<TestedComponent value='val' />);
+
+    expect(getByMockComponent(MockedComponent).props.value).toEqual('val');
+});
+
+it('should hold the last value on a re-render', () => {
+    const {rerender} = render(<TestedComponent value='val' />);
+    rerender(<TestedComponent value='new-val' />);
+
+    expect(getByMockComponent(MockedComponent).props.value).toEqual('new-val');
+});
+
+it('should find via getByMockComponent', () => {
+    render(<TestedComponent value='val' />);
+
+    expect(getByMockComponent(MockedComponent)).toBeInTheDocument();
+});
+
+it('should find via getAllByMockComponent', () => {
+    render(
+        <div>
+            <TestedComponent value='val' />
+            <TestedComponent value='val' />
+        </div>
+    );
+    const all = getAllByMockComponent(MockedComponent);
+    expect(all).toHaveLength(2);
+    expect(all[0]).toBeInTheDocument();
+    expect(all[1]).toBeInTheDocument();
+    expect(all[0]).not.toBe(all[2]);
+});
+
+it('should find via queryByMockComponent', () => {
+    render(<TestedComponent value='val' />);
+
+    expect(queryByMockComponent(MockedComponent)).toBeInTheDocument();
+});
+
+it('should find via queryAllByMockComponent', () => {
+    render(
+        <div>
+            <TestedComponent value='val' />
+            <TestedComponent value='val' />
+        </div>
+    );
+    const all = queryAllByMockComponent(MockedComponent);
+    expect(all).toHaveLength(2);
+    expect(all[0]).toBeInTheDocument();
+    expect(all[1]).toBeInTheDocument();
+    expect(all[0]).not.toBe(all[2]);
+});
+
+it('should find via findByMockComponent', async () => {
+    const TimedFunction = () => {
+        const [visible, setVisible] = useState(false);
+        useEffect(() => {
+            const handle = setTimeout(() => setVisible(true), 10);
+            return () => clearTimeout(handle);
+        }, []);
+        return <div>{visible && <MockedComponent value='' />}</div>;
+    };
+    render(<TimedFunction />);
+
+    expect(await findByMockComponent(MockedComponent)).toBeInTheDocument();
+});
+
+it('should find via findAllByMockComponent', async () => {
+    const TimedFunction = () => {
+        const [visible, setVisible] = useState(false);
+        useEffect(() => {
+            const handle = setTimeout(() => setVisible(true), 10);
+            return () => clearTimeout(handle);
+        }, []);
+        return (
+            <div>
+                {visible && <span><MockedComponent value='' /><MockedComponent value='' /></span>}
+            </div>
+        );
+    };
+    render(<TimedFunction />);
+
+    const all = await findAllByMockComponent(MockedComponent);
+    expect(all).toHaveLength(2);
+    expect(all[0]).toBeInTheDocument();
+    expect(all[1]).toBeInTheDocument();
+    expect(all[0]).not.toBe(all[2]);
+});

src/happy-path.spec.tsx

@@ -1,3 +1,2 @@
-export function setupMockComponent() {
-    console.log('Setting up mock component');
-}
+export {setupMockComponent} from './setupMockComponent';
+export * from './queries';

src/hello.spec.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

src/hello.spec.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import React, { useEffect, useState } from 'react';
+import { setupMockComponent, getByMockComponent } from './index';
+import { findAllByMockComponent, findByMockComponent, getAllByMockComponent, queryAllByMockComponent, queryByMockComponent } from './queries';
+import MockedComponent from './test-components/MockedComponent';
+
+jest.mock('./test-components/MockedComponent');
+
+const TestedComponent = () => {
+    return <div>Nothing Here</div>;
+};
+
+beforeEach(() => {
+    setupMockComponent(MockedComponent);
+});
+
+it('should error if getByMockComponent cannot find it', () => {
+    render(<TestedComponent />);
+
+    expect(() => getByMockComponent(MockedComponent)).toThrow();
+});
+
+it('should error if multiple components exist', () => {
+    render(<div><MockedComponent /><MockedComponent /></div>);
+
+    expect(() => getByMockComponent(MockedComponent)).toThrow();
+});
+
+it('should error if getAllByMockComponent cannot find it', () => {
+    render(<TestedComponent />);
+
+    expect(() => getAllByMockComponent(MockedComponent)).toThrow();
+});
+
+it('should return null if queryByMockComponent cannot find it', () => {
+    render(<TestedComponent />);
+
+    expect(queryByMockComponent(MockedComponent)).toBeNull();
+});
+
+it('should return an empty array if queryAllByMockComponent cannot find it', () => {
+    render(<TestedComponent />);
+
+    expect(queryAllByMockComponent(MockedComponent)).toEqual([]);
+});
+
+it('should reject if findByMockComponent cannot find it', async () => {
+    render(<TestedComponent />);
+
+    expect(findByMockComponent(MockedComponent)).rejects.toBeDefined();
+});
+
+it('should reject if findByMockComponent finds multiple', async () => {
+    render(<div><MockedComponent /><MockedComponent /></div>);
+
+    expect(findByMockComponent(MockedComponent)).rejects.toBeDefined();
+});
+
+it('should reject if findAllByMockComponent cannot find it', async () => {
+    render(<TestedComponent />);
+
+    expect(findAllByMockComponent(MockedComponent)).rejects.toBeDefined();
+});

src/index.ts

@@ -0,0 +1,52 @@
+import { FC } from "react";
+import { MockedElement } from "./setupMockComponent";
+import {MatcherFunction, screen} from '@testing-library/react';
+
+function buildMatcherFunctionForComponent<PropType>(mockComponent: FC<PropType>): MatcherFunction {
+    return (_, element) => {
+        const mockedElement = element as unknown as MockedElement<PropType>;
+        return mockedElement.component === mockComponent;
+    };
+}
+
+/**
+ * Attempt to find the mocked element. Throws if not exactly one is found.
+ */
+export function getByMockComponent<PropType>(mockComponent: FC<PropType>): MockedElement<PropType> {
+    return screen.getByTestId(buildMatcherFunctionForComponent(mockComponent));
+}
+
+/**
+ * Attempt to find all mocked elements. Throws if none found.
+ */
+export function getAllByMockComponent<PropType>(mockComponent: FC<PropType>): MockedElement<PropType>[] {
+    return screen.getAllByTestId(buildMatcherFunctionForComponent(mockComponent));
+}
+
+/**
+ * Attempt to find the mocked element. Returns null if not found. Throws if multiple found.
+ */
+export function queryByMockComponent<PropType>(mockComponent: FC<PropType>): MockedElement<PropType> | null {
+    return screen.queryByTestId(buildMatcherFunctionForComponent(mockComponent));
+}
+
+/**
+ * Attempt to find all mocked element. Returns empty array if not found.
+ */
+export function queryAllByMockComponent<PropType>(mockComponent: FC<PropType>): MockedElement<PropType>[] {
+    return screen.queryAllByTestId(buildMatcherFunctionForComponent(mockComponent));
+}
+
+/**
+ * Attempt to find the mocked element. Reject if not eventually found or multiple are found.
+ */
+export function findByMockComponent<PropType>(mockComponent: FC<PropType>): Promise<MockedElement<PropType>> {
+    return screen.findByTestId(buildMatcherFunctionForComponent(mockComponent));
+}
+
+/**
+ * Attempt to find all the mocked element. Rejects if non are eventually found.
+ */
+export function findAllByMockComponent<PropType>(mockComponent: FC<PropType>): Promise<MockedElement<PropType>[]> {
+    return screen.findAllByTestId(buildMatcherFunctionForComponent(mockComponent));
+}