andyrichardson

Quick and dirty way to force inference on a specific component property with typescript.

interface Props<T, D extends T> {
  ground: T;                  // Value of T is inferred here
  collection: D[];            // Value of T is used here but is of generic D
  function: (arg: D) => void; // And here
}

// Here we use the GroundedProps interface in our component

andyrichardson

// Context file
export const MyContext = createContext(null);

// Provider abstraction file
import { MyContext } from './context';

export const ProviderAbstraction = ({ children }) => {
  const [modalState, setModalState] = useState(false);
  
  return (

andyrichardson

const MyComponent = ({ loading }) => (
  if (loading) {
    return <Spinner />;
  }
  
  return <MainContent />;
);

andyrichardson

// Trigger event
const handleClick = useCallback(() => fetch(url), []);

// Trigger change to render output
const handleClick = useCallback(() => setNewState(s => s+1), []);

andyrichardson

describe('on mount', () => {
  it('renders friends list', () => {
    expect(shallow(<FriendsList friends={friends} />)).toMatchSnapshot()
  });
 
  it('renders "no friends found"', () => {
    expect(shallow(<FriendsList />)).toMatchSnapshot()
  });
});

andyrichardson

describe('on user click', () => {
  const props = {
    friends,
    onUserChange: jest.fn(),
  };
  
  it('calls on user change', () => {
     const wrapper = shallow(<FriendsList {…props} />);
     wrapper.find('FriendItem[value="Paul"]').simulate('click'); 
     expect(onUserChange).toBeCalledWith('Paul');

andyrichardson

#!/bin/bash
dnf update -y
dnf groupinstall "Development Tools"
dnf install perl kernel-devel kernel-headers dnf-plugins-core
dnf config-manager --add-repo https://download.docker.com/linux/fedora/docker-ce.repo
dnf install docker-ce docker-ce-cli containerd.io
systemctl start docker
systemctl enable docker

andyrichardson

const useQuery = (query, opts) => {
  const source = useRef();
  const [state, setState] = useState();
  
  const makeRead = useCallback(() => {
    let status = "pending";
    let response;
    let promise = new Promise((resolve) => {
      source.current = pipe(
        client.createOperation(query, opts),

andyrichardson

About

Here's a quick example of how to get a 1-1 reproduction of storybook fixtures in jest.

Note: If you use storybook, definitely do this - it removes the need to set up context manually for jest testing

Create a providing component for jest

// .storybook/preview.tsx

andyrichardson

.storybook/preview.tsx

import { addDecorator, DecoratorFn } from '@storybook/react';

/** Adds react-router context */
const routerDecorator: DecoratorFn = (Story, context) => {
  const router = context.parameters.router;