Repository: styled-system/styled-system
Pull request #504 (2019-05-25 15:56:01)

Use Jest


Patch:
diff --git a/package.json b/package.json
index 4854a92..c75c49d 100644
--- a/package.json
+++ b/package.json
@@ -14,50 +14,26 @@
     "logo-svg": "npx scrs docs/src/logo/index.js --svg > docs/static/logo.svg",
     "logo-white": "npx scrs docs/src/logo/white.js --svg > docs/static/logo-white.svg",
     "size": "npx bundlesize",
-    "cover": "nyc report --reporter=html --reporter=lcov > coverage.lcov",
-    "codecov": "nyc report --reporter=html --reporter=lcov > coverage.lcov && npx codecov",
-    "test": "nyc ava"
+    "cover": "yarn test --coverage",
+    "codecov": "yarn cover && npx codecov",
+    "test": "jest"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.4.0",
     "@babel/plugin-transform-runtime": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
-    "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.4.0",
-    "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.9",
-    "ava": "^1.3.1",
     "husky": "^1.3.1",
     "lerna": "^3.13.4",
     "lint-staged": "^8.1.5",
-    "nyc": "^13.3.0",
     "prettier": "^1.16.4",
     "react": "^16.8.5",
-    "react-test-renderer": "^16.8.5",
-    "styled-components": "^4.2.0"
+    "react-test-renderer": "^16.8.5"
   },
-  "ava": {
-    "files": [
-      "packages/**/test/*.js"
-    ],
-    "require": [
-      "@babel/register"
-    ]
-  },
-  "nyc": {
-    "exclude": [
-      "packages/**/dist",
-      "packages/**/test/**/*",
-      "**/babel.config.js",
-      "docs",
-      "bench",
-      "examples"
-    ],
-    "reporter": [
-      "lcov",
-      "text-summary",
-      "html"
+  "jest": {
+    "testMatch": [
+      "**/packages/**/test/*.js"
     ]
   },
   "bundlesize": [


Test patch:
diff --git a/packages/css/test/index.js b/packages/css/test/index.js
index b088837..ee48684 100644
--- a/packages/css/test/index.js
+++ b/packages/css/test/index.js
@@ -1,4 +1,3 @@
-import test from 'ava'
 import css from '../src'
 
 const theme = {
@@ -40,35 +39,35 @@ const theme = {
   }
 }
 
-test('returns a function', t => {
-  const res = css()
-  t.is(typeof res, 'function')
+test('returns a function', () => {
+  const result = css()
+  expect(typeof result).toBe('function')
 })
 
-test('returns an object', t => {
-  const res = css()()
-  t.is(typeof res, 'object')
+test('returns an object', () => {
+  const result = css()()
+  expect(typeof result).toBe('object')
 })
 
-test('returns styles', t => {
-  const res = css({
+test('returns styles', () => {
+  const result = css({
     fontSize: 32,
     color: 'blue',
     borderRadius: 4,
   })()
-  t.deepEqual(res, {
+  expect(result).toEqual({
     fontSize: 32,
     color: 'blue',
     borderRadius: 4,
   })
 })
 
-test('returns system props styles', t => {
-  const res = css({
+test('returns system props styles', () => {
+  const result = css({
     color: 'primary',
     fontSize: [ 2, 3, 4]
   })({ theme })
-  t.deepEqual(res, {
+  expect(result).toEqual({
     fontSize: 16,
     '@media screen and (min-width: 40em)': {
       fontSize: 24,
@@ -80,14 +79,14 @@ test('returns system props styles', t => {
   })
 })
 
-test('returns nested system props styles', t => {
-  const res = css({
+test('returns nested system props styles', () => {
+  const result = css({
     color: 'primary',
     '&:hover': {
       color: 'secondary',
     }
   })({ theme })
-  t.deepEqual(res, {
+  expect(result).toEqual({
     color: 'tomato',
     '&:hover': {
       color: 'cyan',
@@ -95,14 +94,14 @@ test('returns nested system props styles', t => {
   })
 })
 
-test('returns nested responsive styles', t => {
-  const res = css({
+test('returns nested responsive styles', () => {
+  const result = css({
     color: 'primary',
     h1: {
       py: [3, 4],
     }
   })({ theme })
-  t.deepEqual(res, {
+  expect(result).toEqual({
     color: 'tomato',
     h1: {
       paddingTop: 16,
@@ -115,8 +114,8 @@ test('returns nested responsive styles', t => {
   })
 })
 
-test('handles all core styled system props', t => {
-  const res = css({
+test('handles all core styled system props', () => {
+  const result = css({
     m: 0,
     mb: 2,
     mx: 'auto',
@@ -129,7 +128,7 @@ test('handles all core styled system props', t => {
     fontFamily: 'monospace',
     lineHeight: 'body',
   })({ theme })
-  t.deepEqual(res, {
+  expect(result).toEqual({
     margin: 0,
     marginBottom: 8,
     marginLeft: 'auto',
@@ -146,42 +145,42 @@ test('handles all core styled system props', t => {
   })
 })
 
-test('works with the css prop', t => {
-  const res = css({
+test('works with the css prop', () => {
+  const result = css({
     color: 'primary',
     m: 0,
     fontSize: 2,
   })(theme)
-  t.deepEqual(res, {
+  expect(result).toEqual({
     color: 'tomato',
     margin: 0,
     fontSize: 16,
   })
 })
 
-test('works with functional arguments', t => {
-  const res = css(t => ({
+test('works with functional arguments', () => {
+  const result = css(t => ({
     color: t.colors.primary,
   }))(theme)
-  t.deepEqual(res, {
+  expect(result).toEqual({
     color: 'tomato',
   })
 })
 
-test('supports functional values', t => {
-  const res = css({
+test('supports functional values', () => {
+  const result = css({
     color: t => t.colors.primary,
   })(theme)
-  t.deepEqual(res, {
+  expect(result).toEqual({
     color: 'tomato',
   })
 })
 
-test('returns variants from theme', t => {
-  const res = css({
+test('returns variants from theme', () => {
+  const result = css({
     variant: 'buttons.primary',
   })(theme)
-  t.deepEqual(res, {
+  expect(result).toEqual({
     padding: 16,
     fontWeight: 600,
     color: 'white',
@@ -190,11 +189,11 @@ test('returns variants from theme', t => {
   })
 })
 
-test('handles variants with responsive values', t => {
-  const res = css({
+test('handles variants with responsive values', () => {
+  const result = css({
     variant: 'text.caps',
   })(theme)
-  t.deepEqual(res, {
+  expect(result).toEqual({
     fontSize: 14,
     letterSpacing: '0.1em',
     textTransform: 'uppercase',
@@ -204,11 +203,11 @@ test('handles variants with responsive values', t => {
   })
 })
 
-test('handles responsive variants', t => {
-  const res = css({
+test('handles responsive variants', () => {
+  const result = css({
     variant: 'text.title',
   })(theme)
-  t.deepEqual(res, {
+  expect(result).toEqual({
     fontSize: 24,
     letterSpacing: '-0.01em',
     '@media screen and (min-width: 40em)': {
@@ -218,12 +217,12 @@ test('handles responsive variants', t => {
   })
 })
 
-test('handles negative margins from scale', t => {
+test('handles negative margins from scale', () => {
   const result = css({
     mt: -3,
     mx: -4,
   })(theme)
-  t.deepEqual(result, {
+  expect(result).toEqual({
     marginTop: -16,
     marginLeft: -32,
     marginRight: -32,
diff --git a/packages/styled-system/test/index.js b/packages/styled-system/test/index.js
index 4628579..ddca973 100644
--- a/packages/styled-system/test/index.js
+++ b/packages/styled-system/test/index.js
@@ -1,4 +1,3 @@
-import test from 'ava'
 import {
   style,
   get,
@@ -36,71 +35,71 @@ const theme = {
   },
 }
 
-test('returns a style function', t => {
+test('returns a style function', () => {
   const func = style({ prop: 'width' })
-  t.is(typeof func, 'function')
+  expect(typeof func).toBe('function')
 })
 
-test('function returns a style object', t => {
+test('function returns a style object', () => {
   const style = width({ width: '50%' })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     width: '50%',
   })
 })
 
-test('returns values from theme', t => {
+test('returns values from theme', () => {
   const style = color({ theme, color: 'blue' })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     color: '#07c',
   })
 })
 
-test('handles aliased props', t => {
+test('handles aliased props', () => {
   const style = backgroundColor({
     theme,
     bg: 'blue',
   })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     backgroundColor: '#07c',
   })
 })
 
-test('long form prop trumps aliased props', t => {
+test('long form prop trumps aliased props', () => {
   const style = backgroundColor({
     theme,
     backgroundColor: 'black',
     bg: 'blue',
   })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     backgroundColor: '#111',
   })
 })
 
-test('returns null', t => {
+test('returns null', () => {
   const style = color({})
-  t.is(style, null)
+  expect(style).toBe(null)
 })
 
-test('returns 0', t => {
+test('returns 0', () => {
   const style = width({ width: 0 })
-  t.deepEqual(style, { width: 0 })
+  expect(style).toEqual({ width: 0 })
 })
 
-test('returns an array of responsive style objects', t => {
+test('returns an array of responsive style objects', () => {
   const style = width({
     width: ['100%', '50%'],
   })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     width: '100%',
     '@media screen and (min-width: 40em)': { width: '50%' },
   })
 })
 
-test('returns an array of responsive style objects for all breakpoints', t => {
+test('returns an array of responsive style objects for all breakpoints', () => {
   const style = width({
     width: ['100%', '75%', '50%', '33%', '25%'],
   })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     width: '100%',
     '@media screen and (min-width: 40em)': { width: '75%' },
     '@media screen and (min-width: 52em)': { width: '50%' },
@@ -108,35 +107,35 @@ test('returns an array of responsive style objects for all breakpoints', t => {
   })
 })
 
-test('skips undefined responsive values', t => {
+test('skips undefined responsive values', () => {
   const style = width({
     width: ['100%', , '50%'],
   })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     width: '100%',
     '@media screen and (min-width: 52em)': { width: '50%' },
   })
 })
 
-test('parses object values', t => {
+test('parses object values', () => {
   const style = width({
     width: {
       _: '100%',
       2: '50%',
     },
   })
-  t.deepEqual(style, {
+  expect(style).toEqual({
     width: '100%',
     '@media screen and (min-width: 64em)': { width: '50%' },
   })
 })
 
-test('get returns a value', t => {
+test('get returns a value', () => {
   const a = get({ blue: '#0cf' }, 'blue')
-  t.is(a, '#0cf')
+  expect(a).toBe('#0cf')
 })
 
-test('get returns the last argument if no value is found', t => {
+test('get returns the last argument if no value is found', () => {
   const a = get(
     {
       blue: '#0cf',
@@ -144,17 +143,17 @@ test('get returns the last argument if no value is found', t => {
     'green',
     '#0f0'
   )
-  t.is(a, '#0f0')
+  expect(a).toBe('#0f0')
 })
 
-test('get returns 0', t => {
+test('get returns 0', () => {
   const a = get({}, 0)
   const b = get({ space: [0, 4] }, 0)
-  t.is(a, 0)
-  t.is(b, 0)
+  expect(a).toBe(0)
+  expect(b).toBe(0)
 })
 
-test('get returns deeply nested values', t => {
+test('get returns deeply nested values', () => {
   const a = get(
     {
       hi: {
@@ -165,25 +164,25 @@ test('get returns deeply nested values', t => {
     },
     'hi.hello.beep'
   )
-  t.is(a, 'boop')
+  expect(a).toBe('boop')
 })
 
-test('themeGet returns values from the theme', t => {
+test('themeGet returns values from the theme', () => {
   const a = themeGet('colors.blue')({ theme })
-  t.is(a, '#07c')
+  expect(a).toBe('#07c')
 })
 
-test('themeGet does not throw when value doesnt exist', t => {
+test('themeGet does not throw when value doesnt exist', () => {
   const a = themeGet('colors.blue.5')({ theme })
-  t.is(a, null)
+  expect(a).toBe(null)
 })
 
-test('themeGet accepts a fallback', t => {
+test('themeGet accepts a fallback', () => {
   const a = themeGet('colors.lightblue', '#0cf')({ theme })
-  t.is(a, '#0cf')
+  expect(a).toBe('#0cf')
 })
 
-test('compose combines style functions', t => {
+test('compose combines style functions', () => {
   const colors = compose(
     color,
     backgroundColor
@@ -192,40 +191,40 @@ test('compose combines style functions', t => {
     color: 'tomato',
     bg: 'black',
   })
-  t.is(typeof colors, 'function')
-  t.deepEqual(styles, { color: 'tomato', backgroundColor: 'black' })
+  expect(typeof colors).toBe('function')
+  expect(styles).toEqual({ color: 'tomato', backgroundColor: 'black' })
 })
 
-test('num returns true for numbers', t => {
+test('num returns true for numbers', () => {
   const isNumber = num(0)
-  t.true(isNumber)
+  expect(isNumber).toBe(true)
 })
 
-test('num returns false for non-numbers', t => {
+test('num returns false for non-numbers', () => {
   const isNumber = num(null)
-  t.false(isNumber)
+  expect(isNumber).toBe(false)
 })
 
-test('is returns true for truthy values', t => {
+test('is returns true for truthy values', () => {
   const isValue = is(0)
-  t.true(isValue)
+  expect(isValue).toBe(true)
 })
 
-test('is returns false for falsey values', t => {
+test('is returns false for falsey values', () => {
   const a = is(null)
   const b = is(undefined)
-  t.false(a)
-  t.false(b)
+  expect(a).toBe(false)
+  expect(b).toBe(false)
 })
 
-test('cloneFunction creates a new function', t => {
+test('cloneFunction creates a new function', () => {
   const func = () => 'hi'
   const b = cloneFunction(func)
-  t.false(func === b)
-  t.is(b(), 'hi')
+  expect(func === b).toBe(false)
+  expect(b()).toBe('hi')
 })
 
-test('variant returns style objects from theme', t => {
+test('variant returns style objects from theme', () => {
   const buttons = variant({ key: 'buttons' })
   const a = buttons({
     theme: {
@@ -238,13 +237,13 @@ test('variant returns style objects from theme', t => {
     },
     variant: 'primary',
   })
-  t.deepEqual(a, {
+  expect(a).toEqual({
     padding: '32px',
     backgroundColor: 'tomato',
   })
 })
 
-test('variant prop can be customized', t => {
+test('variant prop can be customized', () => {
   const buttons = variant({ key: 'buttons', prop: 'type' })
   const a = buttons({
     theme: {
@@ -257,31 +256,31 @@ test('variant prop can be customized', t => {
     },
     type: 'primary',
   })
-  t.deepEqual(a, {
+  expect(a).toEqual({
     padding: '32px',
     backgroundColor: 'tomato',
   })
 })
 
-test('array values longer than breakpoints does not reset returned style object', t => {
+test('array values longer than breakpoints does not reset returned style object', () => {
   const a = width({
     width: ['100%', , , , , '50%', '25%'],
   })
-  t.deepEqual(a, { width: '100%' })
+  expect(a).toEqual({ width: '100%' })
 })
 
-test('mapProps copies propTypes', t => {
+test('mapProps copies propTypes', () => {
   const margin = style({ prop: 'margin' })
   const func = mapProps(props => props)(margin)
-  t.is(typeof func.propTypes, 'object')
+  expect(typeof func.propTypes).toBe('object')
 })
 
-test('merge deeply merges', t => {
+test('merge deeply merges', () => {
   const result = merge(
     { hello: { hi: 'beep', merge: 'me', and: 'me' } },
     { hello: { hey: 'boop', merge: 'me', and: 'all of us' } }
   )
-  t.deepEqual(result, {
+  expect(result).toEqual({
     hello: {
       hi: 'beep',
       hey: 'boop',
@@ -291,7 +290,7 @@ test('merge deeply merges', t => {
   })
 })
 
-test('variant can be composed', t => {
+test('variant can be composed', () => {
   const system = compose(
     variant({ key: 'typography' }),
     fontSize,
@@ -309,7 +308,7 @@ test('variant can be composed', t => {
     variant: 'primary',
     color: '#111',
   })
-  t.deepEqual(result, {
+  expect(result).toEqual({
     fontSize: '32px',
     color: '#111',
   })
diff --git a/packages/styled-system/test/styles.js b/packages/styled-system/test/styles.js
index 164813b..cc2f83d 100644
--- a/packages/styled-system/test/styles.js
+++ b/packages/styled-system/test/styles.js
@@ -1,4 +1,3 @@
-import test from 'ava'
 import {
   space,
   color,
@@ -20,274 +19,267 @@ const theme = {
   },
 }
 
-test('returns color values from theme', t => {
+test('returns color values from theme', () => {
   const a = color({ theme, color: 'blue', bg: 'black' })
-  t.deepEqual(a, { color: '#07c', backgroundColor: '#111' })
+  expect(a).toEqual({ color: '#07c', backgroundColor: '#111' })
 })
 
-test('returns raw color values', t => {
+test('returns raw color values', () => {
   const a = color({
     theme,
     color: 'inherit',
     bg: 'tomato',
   })
-  t.deepEqual(a, { color: 'inherit', backgroundColor: 'tomato' })
+  expect(a).toEqual({ color: 'inherit', backgroundColor: 'tomato' })
 })
 
-test('backgroundColor prop overrides bg prop', t => {
+test('backgroundColor prop overrides bg prop', () => {
   const a = color({
     backgroundColor: 'tomato',
     bg: 'blue',
   })
-  t.deepEqual(a, { backgroundColor: 'tomato' })
+  expect(a).toEqual({ backgroundColor: 'tomato' })
 })
 
-test('returns a pixel font-size', t => {
+test('returns a pixel font-size', () => {
   const a = fontSize({ fontSize: 48 })
-  t.deepEqual(a, { fontSize: '48px' })
+  expect(a).toEqual({ fontSize: '48px' })
 })
 
-test('uses a default font-size scale', t => {
+test('uses a default font-size scale', () => {
   const a = fontSize({ fontSize: 2 })
-  t.deepEqual(a, { fontSize: '16px' })
+  expect(a).toEqual({ fontSize: '16px' })
 })
 
-test('returns a string font-size', t => {
+test('returns a string font-size', () => {
   const a = fontSize({ fontSize: '2em' })
-  t.deepEqual(a, { fontSize: '2em' })
+  expect(a).toEqual({ fontSize: '2em' })
 })
 
-test('returns a percentage based width', t => {
+test('returns a percentage based width', () => {
   const a = width({ width: 1 / 2 })
-  t.deepEqual(a, { width: '50%' })
+  expect(a).toEqual({ width: '50%' })
 })
 
-test('returns a pixel based width', t => {
+test('returns a pixel based width', () => {
   const a = width({ width: 256 })
-  t.deepEqual(a, { width: '256px' })
+  expect(a).toEqual({ width: '256px' })
 })
 
-test('returns a string width', t => {
+test('returns a string width', () => {
   const a = width({ width: 'auto' })
-  t.deepEqual(a, { width: 'auto' })
+  expect(a).toEqual({ width: 'auto' })
 })
 
-test('returns an array of style objects', t => {
+test('returns an array of style objects', () => {
   const styles = space({
     m: '4px',
   })
-  t.deepEqual(styles, { margin: '4px' })
+  expect(styles).toEqual({ margin: '4px' })
 })
 
-test('returns 0 values', t => {
+test('returns 0 values', () => {
   const styles = space({ m: 0 })
-  t.deepEqual(styles, { margin: 0 })
+  expect(styles).toEqual({ margin: 0 })
 })
 
-test('returns negative pixel values', t => {
+test('returns negative pixel values', () => {
   const styles = space({ m: -2 })
-  t.deepEqual(styles, { margin: '-8px' })
+  expect(styles).toEqual({ margin: '-8px' })
 })
 
-test('returns negative em values', t => {
+test('returns negative em values', () => {
   const styles = space({ m: '-16em' })
-  t.deepEqual(styles, { margin: '-16em' })
+  expect(styles).toEqual({ margin: '-16em' })
 })
 
-test('returns negative theme values', t => {
+test('returns negative theme values', () => {
   const styles = space({
     theme: {
       space: [0, 4, 8],
     },
     m: -2,
   })
-  t.deepEqual(styles, { margin: '-8px' })
+  expect(styles).toEqual({ margin: '-8px' })
 })
 
-test('returns positive theme values', t => {
+test('returns positive theme values', () => {
   const styles = space({
     theme: {
       space: [0, '1em', '2em'],
     },
     m: 2,
   })
-  t.deepEqual(styles, { margin: '2em' })
+  expect(styles).toEqual({ margin: '2em' })
 })
 
-test('returns responsive values', t => {
+test('returns responsive values', () => {
   const styles = space({
     m: [0, 2, 3],
   })
-  t.deepEqual(styles, {
+  expect(styles).toEqual({
     margin: 0,
     '@media screen and (min-width: 40em)': { margin: '8px' },
     '@media screen and (min-width: 52em)': { margin: '16px' },
   })
 })
 
-test('returns aliased values', t => {
+test('returns aliased values', () => {
   const styles = space({
     px: 2,
   })
-  t.deepEqual(styles, { paddingLeft: '8px', paddingRight: '8px' })
+  expect(styles).toEqual({ paddingLeft: '8px', paddingRight: '8px' })
 })
 
-test('returns string values from theme', t => {
+test('returns string values from theme', () => {
   const styles = space({
     theme: {
       space: [0, '1em'],
     },
     padding: 1,
   })
-  t.deepEqual(styles, { padding: '1em' })
+  expect(styles).toEqual({ padding: '1em' })
 })
 
-test('returns negative string values from theme', t => {
+test('returns negative string values from theme', () => {
   const styles = space({
     theme: {
       space: [0, '1em'],
     },
     margin: -1,
   })
-  t.deepEqual(styles, { margin: '-1em' })
+  expect(styles).toEqual({ margin: '-1em' })
 })
 
-test('returns values from theme object', t => {
+test('returns values from theme object', () => {
   const styles = space({
     theme: {
       space: { sm: 1 },
     },
     margin: 'sm',
   })
-
-  t.deepEqual(styles, { margin: '1px' })
+  expect(styles).toEqual({ margin: '1px' })
 })
 
-test('pl prop sets paddingLeft', t => {
+test('pl prop sets paddingLeft', () => {
   const styles = space({ pl: 2 })
-  t.deepEqual(styles, { paddingLeft: '8px' })
+  expect(styles).toEqual({ paddingLeft: '8px' })
 })
 
-test('pl prop sets paddingLeft 0', t => {
+test('pl prop sets paddingLeft 0', () => {
   const styles = space({ pl: 0 })
-  t.deepEqual(styles, { paddingLeft: 0 })
+  expect(styles).toEqual({ paddingLeft: 0 })
 })
 
-test('px prop overrides pl prop', t => {
+test('px prop overrides pl prop', () => {
   const styles = space({
     pl: 1,
     px: 2,
   })
-  t.deepEqual(styles, { paddingLeft: '8px', paddingRight: '8px' })
+  expect(styles).toEqual({ paddingLeft: '8px', paddingRight: '8px' })
 })
 
-test('py prop overrides pb prop', t => {
+test('py prop overrides pb prop', () => {
   const styles = space({
     pb: 1,
     py: 2,
   })
-  t.deepEqual(styles, { paddingTop: '8px', paddingBottom: '8px' })
+  expect(styles).toEqual({ paddingTop: '8px', paddingBottom: '8px' })
 })
 
-test('mx prop overrides mr prop', t => {
+test('mx prop overrides mr prop', () => {
   const styles = space({
     mr: 1,
     mx: 2,
   })
-  t.deepEqual(styles, { marginLeft: '8px', marginRight: '8px' })
+  expect(styles).toEqual({ marginLeft: '8px', marginRight: '8px' })
 })
 
-test('my prop overrides mt prop', t => {
+test('my prop overrides mt prop', () => {
   const styles = space({
     mt: 1,
     my: 2,
   })
-  t.deepEqual(styles, { marginTop: '8px', marginBottom: '8px' })
+  expect(styles).toEqual({ marginTop: '8px', marginBottom: '8px' })
 })
 
-test('margin overrides m prop', t => {
+test('margin overrides m prop', () => {
   const styles = space({
     m: 1,
     margin: 2,
   })
-  t.deepEqual(styles, { margin: '8px' })
+  expect(styles).toEqual({ margin: '8px' })
 })
 
-test('space includes propTypes', t => {
+test('space includes propTypes', () => {
   const { propTypes } = space
-  t.is(typeof propTypes, 'object')
-  t.is(typeof propTypes.m, 'function')
+  expect(typeof propTypes).toBe('object')
+  expect(typeof propTypes.m).toBe('function')
 })
 
-test('size returns width and height', t => {
+test('size returns width and height', () => {
   const styles = size({
     size: 4,
   })
-  t.deepEqual(styles, { width: '4px', height: '4px' })
+  expect(styles).toEqual({ width: '4px', height: '4px' })
 })
 
 // grid
-test('gridGap returns a scalar style', t => {
+test('gridGap returns a scalar style', () => {
   const a = gridGap({
     theme: {
       space: [0, 2, 4, 8],
     },
     gridGap: 3,
   })
-
-  t.deepEqual(a, { gridGap: '8px' })
+  expect(a).toEqual({ gridGap: '8px' })
 })
 
-test('gridGap uses the default scale', t => {
+test('gridGap uses the default scale', () => {
   const a = gridGap({
     theme: {},
     gridGap: 2,
   })
-
-  t.deepEqual(a, { gridGap: '8px' })
+  expect(a).toEqual({ gridGap: '8px' })
 })
 
-test('gridRowGap returns a scalar style', t => {
+test('gridRowGap returns a scalar style', () => {
   const a = gridRowGap({
     theme: {
       space: [0, 2, 4, 8],
     },
     gridRowGap: 3,
   })
-
-  t.deepEqual(a, { gridRowGap: '8px' })
+  expect(a).toEqual({ gridRowGap: '8px' })
 })
 
-test('gridRowGap uses the default scale', t => {
+test('gridRowGap uses the default scale', () => {
   const a = gridRowGap({
     theme: {},
     gridRowGap: 2,
   })
-
-  t.deepEqual(a, { gridRowGap: '8px' })
+  expect(a).toEqual({ gridRowGap: '8px' })
 })
 
-test('gridColumnGap returns a scalar style', t => {
+test('gridColumnGap returns a scalar style', () => {
   const a = gridColumnGap({
     theme: {
       space: [0, 2, 4, 8],
     },
     gridColumnGap: 3,
   })
-
-  t.deepEqual(a, { gridColumnGap: '8px' })
+  expect(a).toEqual({ gridColumnGap: '8px' })
 })
 
-test('gridColumnGap uses the default scale', t => {
+test('gridColumnGap uses the default scale', () => {
   const a = gridColumnGap({
     theme: {},
     gridColumnGap: 2,
   })
-
-  t.deepEqual(a, { gridColumnGap: '8px' })
+  expect(a).toEqual({ gridColumnGap: '8px' })
 })
 
-test('textStyle prop returns theme.textStyles object', t => {
+test('textStyle prop returns theme.textStyles object', () => {
   const a = textStyle({
     theme: {
       textStyles: {
@@ -299,13 +291,13 @@ test('textStyle prop returns theme.textStyles object', t => {
     },
     textStyle: 'heading',
   })
-  t.deepEqual(a, {
+  expect(a).toEqual({
     fontWeight: 'bold',
     lineHeight: 1.25,
   })
 })
 
-test('colors prop returns theme.colorStyles object', t => {
+test('colors prop returns theme.colorStyles object', () => {
   const a = colorStyle({
     theme: {
       colorStyles: {
@@ -317,20 +309,20 @@ test('colors prop returns theme.colorStyles object', t => {
     },
     colors: 'dark',
   })
-  t.deepEqual(a, {
+  expect(a).toEqual({
     color: '#fff',
     backgroundColor: '#000',
   })
 })
 
-test('borders prop returns correct sequence', t => {
+test('borders prop returns correct sequence', () => {
   const a = borders({
     borderBottom: '1px solid',
     borderWidth: '2px',
     borderStyle: 'dashed',
     borderColor: 'red',
   })
-  t.deepEqual(a, {
+  expect(a).toEqual({
     borderBottom: '1px solid',
     borderWidth: '2px',
     borderStyle: 'dashed',