@instructure/ui-react-utils 8.53.2 → 8.53.3-pr-snapshot-8

package/lib/__new-tests__/hack.test.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _hack = require("../hack");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+class TestComponent extends _react.Component {
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", null, this.props.qux, " ", this.props.bar);
+  }
+}
+TestComponent.displayName = "TestComponent";
+TestComponent.propTypes = {
+  bar: _propTypes.default.string,
+  qux: _propTypes.default.string
+};
+TestComponent.defaultProps = {
+  bar: void 0,
+  qux: 'Hello'
+};
+describe('@hack', () => {
+  describe('hack props', () => {
+    var _HackComponent, _HackComponent2;
+    const HackComponent = (0, _hack.hack)(['bar'])(TestComponent);
+    it('should warn when using an hack prop', () => {
+      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      (0, _react2.render)(_HackComponent || (_HackComponent = /*#__PURE__*/_react.default.createElement(HackComponent, {
+        bar: "Jane"
+      })));
+      const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is a temporary hack and will be removed in a future release.';
+      expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
+      consoleWarningSpy.mockRestore();
+    });
+    it('should not output a warning using a non-hack prop', () => {
+      const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      (0, _react2.render)(_HackComponent2 || (_HackComponent2 = /*#__PURE__*/_react.default.createElement(HackComponent, {
+        qux: "Jane"
+      })));
+      expect(consoleWarningSpy).not.toHaveBeenCalled();
+      consoleWarningSpy.mockRestore();
+    });
+  });
+});

package/lib/__new-tests__/omitProps.test.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("@testing-library/jest-dom");
+var _omitProps = require("../omitProps");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('omitProps', () => {
+  it('should work with PropTypes', () => {
+    const propTypes = {
+      prop1: _propTypes.default.string.isRequired,
+      prop2: _propTypes.default.number
+    };
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp: 'excessiveValue'
+    };
+    const expectedResult = {
+      excessiveProp: 'excessiveValue'
+    };
+    const actualResult = (0, _omitProps.omitProps)(inputProps, propTypes);
+    expect(actualResult).toEqual(expectedResult);
+  });
+  it('should work with PropTypes and exclude the given keys', () => {
+    const propTypes = {
+      prop1: _propTypes.default.string.isRequired,
+      prop2: _propTypes.default.number
+    };
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    };
+    const expectedResult = {
+      excessiveProp2: 'excessiveValue2'
+    };
+    const actualResult = (0, _omitProps.omitProps)(inputProps, propTypes, ['excessiveProp1']);
+    expect(actualResult).toEqual(expectedResult);
+  });
+  it('should work with an input of a list allowed prop names', () => {
+    const allowedPropKeys = ['prop1', 'prop2'];
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    };
+    const expectedResult = {
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    };
+    const actualResult = (0, _omitProps.omitProps)(inputProps, allowedPropKeys);
+    expect(actualResult).toEqual(expectedResult);
+  });
+  it('should work with an input of a list allowed prop names and exclude the given keys', () => {
+    const allowedPropKeys = ['prop1', 'prop2'];
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    };
+    const expectedResult = {
+      excessiveProp2: 'excessiveValue2'
+    };
+    const actualResult = (0, _omitProps.omitProps)(inputProps, allowedPropKeys, ['excessiveProp1']);
+    expect(actualResult).toEqual(expectedResult);
+  });
+});

package/lib/__new-tests__/passthroughProps.test.js

@@ -0,0 +1,102 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _passthroughProps = require("../passthroughProps");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('passthroughProps', () => {
+  it('should passthrough standard dom attributes', () => {
+    const props = {
+      id: 'myId',
+      title: 'My title'
+    };
+    expect(Object.keys((0, _passthroughProps.passthroughProps)(props)).length).toEqual(2);
+  });
+  it('should passthrough data attributes', () => {
+    const props = {
+      'data-test': true
+    };
+    expect(Object.keys((0, _passthroughProps.passthroughProps)(props)).length).toEqual(1);
+  });
+  it('should passthrough valid react props', () => {
+    const props = {
+      ref: () => {},
+      innerHTML: '<span>hello world</span>'
+    };
+    expect(Object.keys((0, _passthroughProps.passthroughProps)(props)).length).toEqual(2);
+  });
+  it('should passthrough props prefixed with "on"', () => {
+    const props = {
+      onClick: () => {},
+      onCustomCallback: () => {},
+      onChange: () => {}
+    };
+    expect(Object.keys((0, _passthroughProps.passthroughProps)(props)).length).toEqual(3);
+  });
+  it('should omit invalid props', () => {
+    const props = {
+      myCustomProp: 'hello'
+    };
+    expect(Object.keys((0, _passthroughProps.passthroughProps)(props)).length).toEqual(0);
+  });
+  it('should omit certain react props', () => {
+    const props = {
+      style: {
+        color: 'blue'
+      },
+      className: 'myClass',
+      children: 'hello world',
+      theme: {
+        themeVar: 'myColor'
+      }
+    };
+    expect(Object.keys((0, _passthroughProps.passthroughProps)(props)).length).toEqual(0);
+  });
+  it('should passthrough and omit correct props', () => {
+    const props = {
+      id: 'myId',
+      title: 'My title',
+      'data-test': true,
+      className: 'myClassName',
+      children: 'hello world',
+      style: {
+        color: 'blue'
+      },
+      theme: {
+        themeVar: 'myColor'
+      },
+      withSomething: false,
+      onCustomCallback: null,
+      onChange: null
+    };
+    expect((0, _passthroughProps.passthroughProps)(props)).toEqual({
+      id: 'myId',
+      title: 'My title',
+      'data-test': true,
+      onCustomCallback: null,
+      onChange: null
+    });
+  });
+});

package/lib/__new-tests__/pickProps.test.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("@testing-library/jest-dom");
+var _pickProps = require("../pickProps");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('pickProps', () => {
+  it('should work with propTypes', () => {
+    const propTypes = {
+      prop1: _propTypes.default.string.isRequired,
+      prop2: _propTypes.default.number
+    };
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp: 'excessiveValue'
+    };
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42
+    };
+    const actualResult = (0, _pickProps.pickProps)(inputProps, propTypes);
+    expect(actualResult).toEqual(expectedResult);
+  });
+  it('should add the `include` keys to the result with PropTypes', () => {
+    const propTypes = {
+      prop1: _propTypes.default.string.isRequired,
+      prop2: _propTypes.default.number
+    };
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    };
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp2: 'excessiveValue2'
+    };
+    const actualResult = (0, _pickProps.pickProps)(inputProps, propTypes, ['excessiveProp2']);
+    expect(actualResult).toEqual(expectedResult);
+  });
+  it('should work with an input of a list allowed prop names', () => {
+    const allowedPropKeys = ['prop1', 'prop2'];
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1'
+    };
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42
+    };
+    const actualResult = (0, _pickProps.pickProps)(inputProps, allowedPropKeys);
+    expect(actualResult).toEqual(expectedResult);
+  });
+  it('should add the `include` keys to the result with a list allowed prop names', () => {
+    const allowedPropKeys = ['prop1', 'prop2'];
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    };
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp2: 'excessiveValue2'
+    };
+    const actualResult = (0, _pickProps.pickProps)(inputProps, allowedPropKeys, ['excessiveProp2']);
+    expect(actualResult).toEqual(expectedResult);
+  });
+});

package/lib/__new-tests__/safeCloneElement.test.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _safeCloneElement = require("../safeCloneElement");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('safeCloneElement', () => {
+  const SafeClone = function ({
+    element,
+    props,
+    children
+  }) {
+    return (0, _safeCloneElement.safeCloneElement)(element, props, children);
+  };
+  it('should preserve refs', () => {
+    const origRef = jest.fn();
+    const cloneRef = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(SafeClone, {
+      element: /*#__PURE__*/_react.default.createElement("div", {
+        ref: origRef
+      }),
+      props: {
+        ref: cloneRef
+      }
+    }));
+    expect(origRef).toHaveBeenCalled();
+    expect(cloneRef).toHaveBeenCalled();
+  });
+  it('should preserve event handlers', () => {
+    const onClickA = jest.fn();
+    const onClickB = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(SafeClone, {
+      element: /*#__PURE__*/_react.default.createElement("button", {
+        onClick: onClickA
+      }),
+      props: {
+        onClick: onClickB
+      }
+    }));
+    const button = _react2.screen.getByRole('button');
+    button.click();
+    expect(onClickA).toHaveBeenCalled();
+    expect(onClickB).toHaveBeenCalled();
+  });
+  it('should preserve already chained functions', () => {
+    const onClickA = jest.fn();
+    const onClickB = jest.fn();
+    const onClickC = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(SafeClone, {
+      element: /*#__PURE__*/_react.default.createElement("button", {
+        onClick: onClickA
+      }),
+      props: {
+        onClick: (0, _createChainedFunction.createChainedFunction)(onClickB, onClickC)
+      }
+    }));
+    const button = _react2.screen.getByRole('button');
+    button.click();
+    expect(onClickA).toHaveBeenCalled();
+    expect(onClickB).toHaveBeenCalled();
+    expect(onClickC).toHaveBeenCalled();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-react-utils",
-  "version": "8.53.2",
+  "version": "8.53.3-pr-snapshot-8",
   "description": "A React utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -22,17 +22,18 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.2",
-    "@instructure/ui-test-utils": "8.53.2"
+    "@instructure/ui-babel-preset": "8.53.3-pr-snapshot-8",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
     "@emotion/is-prop-valid": "^1.2.1",
-    "@instructure/console": "8.53.2",
-    "@instructure/shared-types": "8.53.2",
-    "@instructure/ui-decorator": "8.53.2",
-    "@instructure/ui-dom-utils": "8.53.2",
-    "@instructure/ui-utils": "8.53.2",
+    "@instructure/console": "8.53.3-pr-snapshot-8",
+    "@instructure/shared-types": "8.53.3-pr-snapshot-8",
+    "@instructure/ui-decorator": "8.53.3-pr-snapshot-8",
+    "@instructure/ui-dom-utils": "8.53.3-pr-snapshot-8",
+    "@instructure/ui-utils": "8.53.3-pr-snapshot-8",
     "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1"
   },

package/src/__new-tests__/ComponentIdentifier.test.tsx

@@ -0,0 +1,105 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { Component, ReactNode } from 'react'
+import PropTypes from 'prop-types'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { ComponentIdentifier } from '../ComponentIdentifier'
+
+describe('ComponentIdentifier', () => {
+  beforeAll(() => {
+    // Mocking console warnings to prevent test output pollution
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+  afterAll(() => {
+    jest.restoreAllMocks()
+  })
+
+  class Trigger extends ComponentIdentifier<any> {
+    static displayName = 'Trigger'
+  }
+
+  class App extends Component<{ children: ReactNode }> {
+    static propTypes = {
+      children: PropTypes.node
+    }
+
+    static defaultProps = {
+      children: null
+    }
+
+    render() {
+      const trigger = ComponentIdentifier.pick(Trigger, this.props.children)
+
+      return (
+        <div>
+          <h2>Trigger</h2>
+          {trigger}
+        </div>
+      )
+    }
+  }
+
+  it('should render only child', () => {
+    let buttonRef: HTMLButtonElement
+    render(
+      <App>
+        <Trigger>
+          <button ref={(el) => (buttonRef = el!)}>Click Me</button>
+        </Trigger>
+      </App>
+    )
+
+    expect(buttonRef!.textContent).toEqual('Click Me')
+  })
+
+  it('should not error when no children provided', () => {
+    const renderApp = () =>
+      render(
+        <App>
+          <Trigger />
+        </App>
+      )
+
+    expect(renderApp).not.toThrow()
+  })
+
+  it('should pass props', () => {
+    let buttonRef: HTMLButtonElement | null
+    const onClick = jest.fn()
+    render(
+      <App>
+        <Trigger onClick={onClick}>
+          <button ref={(el) => (buttonRef = el)}>Click Me</button>
+        </Trigger>
+      </App>
+    )
+
+    buttonRef!.click()
+    expect(onClick).toHaveBeenCalled()
+  })
+})