Skip to content

Instantly share code, notes, and snippets.

View paigen11's full-sized avatar

Paige Niedringhaus paigen11

View GitHub Profile
@paigen11
paigen11 / react-transition-group-css.js
Last active April 12, 2020 15:50
Sample JavaScript code of React Transition Group's CSSTransition component
const ExampleApp = () => {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<CSSTransition in={isVisible} timeout={300} classNames="sample">
<div>
Now you see me, next click, you don't
</div>
</CSSTransition>
@paigen11
paigen11 / react-transition-group-transition.js
Last active April 11, 2020 23:54
Simple demo code example using React Transition Group's transition component
import { Transition } from "react-transition-group";
const duration = 500;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
};
const transitionStyles = {
@paigen11
paigen11 / rtl-fireEvent.js
Last active April 9, 2020 21:25
Asynchronous example of typical action like fireEvent with React Testing Library.
await fireEvent.click(orderButton);
@paigen11
paigen11 / rtl-fuzzy-match-text.js
Created March 28, 2020 22:54
Example of how to use getByText's fuzzy match in React Testing Library.
<div>Hi there!</div>
getByText(container, 'i the', { exact: false });
getByText(container, 'hi there', { exact: false });
@paigen11
paigen11 / rtl-previousSibling.js
Created March 28, 2020 22:18
Example of using previousSibling or nextSibling to target elements around a particular element in React Testing Library.
const keyToSelect = await component.findByText('key to select');
userEvent.click(keyToSelect.previousSibling.firstChild.firstChild);
@paigen11
paigen11 / rtl-parentElement.js
Created March 28, 2020 21:55
Example of using parentElement to access a DOM element a level above the targeted element in React Testing Library.
const input = component.queryByPlaceholderText(componentText);
const enter = input.parentElement.querySelector('.anticon-plus');
@paigen11
paigen11 / queryselector.js
Created March 28, 2020 21:45
Example of how to check classes in a component while using React Testing Library
expect(document.querySelector('.hidden')).toBeInTheDocument();
@paigen11
paigen11 / rtl-debug.js
Created March 28, 2020 21:30
The default debugging method for React Testing Library.
console.log(component.debug());
@paigen11
paigen11 / rtl-prettyDOM
Created March 28, 2020 21:22
Example to debug a component in React Testing Library when the built-in debug() function cuts off from rendering everything in the console.
console.log(prettyDOM(component.container, 99999));
@paigen11
paigen11 / rtl-userEventImport.js
Created March 28, 2020 20:53
Adding the userEvent library to a React Testing Library file.
import userEvent from '@testing-library/user-event';