Skip to content

Instantly share code, notes, and snippets.

🤓
working hard to make the world better with software

Kent C. Dodds kentcdodds

🤓
working hard to make the world better with software
Block or report user

Report or block kentcdodds

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View code.js
// thanks to node throwing an error if you try to use instanceof with an arrow
// function we have to have this function. I guess it's spec... SMH...
// NOTE: I tried doing the "proper thing" using Symbol.instanceOf
// but no matter what that did, I couldn't make that work with a SyntaxError
// because SyntaxError[Symbol.hasInstance]() returns false. What. The. Heck!?
// So I'm doing this hacky try/catch garbage :-/
function instanceOf(inst, cls) {
try {
return inst instanceof cls
} catch (error) {
View 0. README.md

Code Coverage

Code coverage is accomplished with Jest thanks to babel-plugin-istanbul. It transforms your code to "instrument" it for coverage. When your tests are finished, Jest reads the coverage data to generate the coverage report.

Reviewing code that has been instrumented for coverage can help understanding how coverage works and how to interpret coverage reports.

@kentcdodds
kentcdodds / example
Last active Aug 3, 2019
example jest output for failed role assertion
View example
FAIL src/screens/__tests__/book.js
✕ renders all the book information (173ms)
● renders all the book information
Unable to find an element with the role "blah"
Here are the available roles:
img:
@kentcdodds
kentcdodds / languages.json
Created Jul 31, 2019
The default "languages" supported in prettier
View languages.json
[
{
"name": "JavaScript",
"type": "programming",
"tmScope": "source.js",
"aceMode": "javascript",
"codemirrorMode": "javascript",
"codemirrorMimeType": "text/javascript",
"color": "#f1e05a",
"aliases": [
@kentcdodds
kentcdodds / create-reducer-context.js
Created May 8, 2019
Just some fun idea I had and don't want to lose.
View create-reducer-context.js
// src/count-context.js
import React from 'react'
function countReducer(count, action) {
const {step = 1} = action
switch (action.type) {
case 'INCREMENT': {
return count + step
}
default: {
@kentcdodds
kentcdodds / control-props.js
Last active Apr 2, 2019
A simpler implementation of control props
View control-props.js
// control props
import React from 'react'
import {Switch} from '../switch'
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))
const noop = () => {}
function toggleReducer(state, {type, initialState}) {
switch (type) {
case useToggle.types.toggle: {
@kentcdodds
kentcdodds / control-props.js
Created Apr 2, 2019
An implementation of control props with hooks
View control-props.js
// control props
import React from 'react'
import _ from 'lodash'
import {Switch} from '../switch'
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))
const noop = () => {}
function toggleReducer(state, {type, initialState}) {
View button.js
import 'pp-vx/dist/components/button/button.css'
import React from 'react'
import clsx from 'clsx'
const sizes: {[key: string]: string} = {
md: 'vx_btn--size_md',
sm: 'vx_btn--size_sm',
}
export type OneOrAnother<T1, T2> =
@kentcdodds
kentcdodds / break-on-access.js
Created Jan 8, 2019
My Chrome DevTools snippets
View break-on-access.js
// https://github.com/paulirish/break-on-access/blob/master/break-on-access.js
function breakOn(obj, propertyName, mode, func) {
// this is directly from https://github.com/paulmillr/es6-shim
function getPropertyDescriptor(obj, name) {
var property = Object.getOwnPropertyDescriptor(obj, name);
var proto = Object.getPrototypeOf(obj);
while (property === undefined && proto !== null) {
property = Object.getOwnPropertyDescriptor(proto, name);
proto = Object.getPrototypeOf(proto);
}
@kentcdodds
kentcdodds / use-deep-compare-effect.js
Created Nov 9, 2018
a custom react hook that I want feedback on because it feels like a lot of work and maybe I'm missing something...
View use-deep-compare-effect.js
// Feedback requested on the useDeepCompareEffect
// it just feels like a bit of work...
// HERE'S THE REASON I NEED THIS:
// when people use the useQuery hook, they'll typically
// do so like this: `useQuery(myQuery, {var1: props.value})`
// which means that passing `variables` to `useEffect` will
// trigger a rerun of the callback even if they didn't
// actually change (referrential equality)
function useQuery({query, variables}) {
You can’t perform that action at this time.