test: refactor tests with describe.each

Author: csvenke

.eslintrc.js

@@ -1,4 +1,9 @@
 module.exports = {
   parser: 'babel-eslint',
-  extends: ['standard', 'standard-react']
+  extends: ['standard', 'standard-react'],
+  globals: {
+    it: true,
+    describe: true,
+    expect: true
+  }
 }

package.json

@@ -33,7 +33,7 @@
     "build": "rm -rf dist && rollup -c",
     "build:copy": "cp package.json dist/ && cp README.md dist/ && cp LICENSE dist/ && cp lib/index.d.ts dist/",
     "release": "yarn semantic-release",
-    "lint": "eslint --fix  \"lib/**/*.js\" *.js",
+    "lint": "eslint --fix {lib,test}/**/*.js *.js",
     "test": "jest",
     "report-coverage": "cat ./coverage/lcov.info | coveralls"
   },

test/List.spec.js

@@ -1,56 +1,47 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 
-import { createTests } from './utils'
 import { List as List1 } from '../dist/index.cjs'
 import { List as List2 } from '../dist/index.esm'
 import List3 from '../dist/List'
 import List4 from '../lib/List'
 
-const runTests = createTests(List1, List2, List3, List4)
+const describeEach = describe.each([List1, List2, List3, List4])
 
-runTests(List => {
-  describe('with render', () => {
-    const input = [1, 2, 3]
+const input = [1, 2, 3]
 
-    test('should return primary content from render', () => {
-      const element = <List items={input} render={n => <div key={n}>{n}</div>} />
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('with render', List => {
+  it('should return primary content from render', () => {
+    const element = <List items={input} render={n => <div key={n}>{n}</div>} />
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
+})
 
-  describe('with children', () => {
-    const input = [1, 2, 3]
-
-    test('should return primary content from children', () => {
-      const element = <List items={input}>{n => <div key={n}>{n}</div>}</List>
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('with children', List => {
+  it('should return primary content from children', () => {
+    const element = <List items={input}>{n => <div key={n}>{n}</div>}</List>
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
+})
 
-  describe('with children and render', () => {
-    const input = [1, 2, 3]
-
-    test('should return primary content from children and ignore render', () => {
-      const element = (
-        <List items={input} render={n => <a key={n}>{n}</a>}>
-          {n => <div key={n}>{n}</div>}
-        </List>
-      )
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('with children and render', List => {
+  it('should return primary content from children and ignore render', () => {
+    const element = (
+      <List items={input} render={n => <a key={n}>{n}</a>}>
+        {n => <div key={n}>{n}</div>}
+      </List>
+    )
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
+})
 
-  describe('without children and render', () => {
-    const input = [1, 2, 3]
-
-    test('should return null', () => {
-      const element = <List items={input} />
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('without children and render', List => {
+  it('should return null', () => {
+    const element = <List items={input} />
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
 })

test/Show.spec.js

@@ -1,82 +1,78 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 
-import { createTests } from './utils'
 import { Show as Show1 } from '../dist/index.cjs'
 import { Show as Show2 } from '../dist/index.esm'
 import Show3 from '../dist/Show'
 import Show4 from '../lib/Show'
 
-const runTests = createTests(Show1, Show2, Show3, Show4)
+const describeEach = describe.each([Show1, Show2, Show3, Show4])
+const input = <div>render me</div>
 
-runTests(Show => {
-  const input = <div>render me</div>
-
-  describe('with children', () => {
-    test('should return primary content from children if when equals true', () => {
-      const element = <Show when>{input}</Show>
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('with children', Show => {
+  it('should return primary content from children if when equals true', () => {
+    const element = <Show when>{input}</Show>
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
+  })
 
-    test('should return null if when equals false', () => {
-      const element = <Show when={false}>{input}</Show>
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+  it('should return null if when equals false', () => {
+    const element = <Show when={false}>{input}</Show>
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
+})
 
-  describe('with render', () => {
-    test('should return primary content from render if when equals true', () => {
-      const element = <Show when render={() => input} />
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('with render', Show => {
+  it('should return primary content from render if when equals true', () => {
+    const element = <Show when render={() => input} />
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
+  })
 
-    test('should return null if when equals false', () => {
-      const element = <Show when={false} render={() => input} />
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+  it('should return null if when equals false', () => {
+    const element = <Show when={false} render={() => input} />
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
+  })
 
-    test('should not evaluate render if when is undefined', () => {
-      const obj = undefined
-      const element = <Show when={!!obj} render={() => <div>{obj.label}</div>} />
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+  it('should not evaluate render if when is undefined', () => {
+    const obj = undefined
+    const element = <Show when={!!obj} render={() => <div>{obj.label}</div>} />
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
+})
 
-  describe('with children and render', () => {
-    const renderInput = <div>render</div>
-    const childrenInput = <div>children</div>
+describeEach('with children and render', Show => {
+  const renderInput = <div>render</div>
+  const childrenInput = <div>children</div>
 
-    test('should return primary content from children and ignore render if when equals true', () => {
-      const element = (
-        <Show when render={() => renderInput}>
-          {childrenInput}
-        </Show>
-      )
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+  it('should return primary content from children and ignore render if when equals true', () => {
+    const element = (
+      <Show when render={() => renderInput}>
+        {childrenInput}
+      </Show>
+    )
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
+  })
 
-    test('should return null if when equals false', () => {
-      const element = (
-        <Show when={false} render={() => renderInput}>
-          {childrenInput}
-        </Show>
-      )
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+  it('should return null if when equals false', () => {
+    const element = (
+      <Show when={false} render={() => renderInput}>
+        {childrenInput}
+      </Show>
+    )
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
+})
 
-  describe('without children and render', () => {
-    test('should return null', () => {
-      const element = <Show when />
-      const component = renderer.create(element)
-      expect(component.toJSON()).toMatchSnapshot()
-    })
+describeEach('without children and render', Show => {
+  it('should return null', () => {
+    const element = <Show when />
+    const component = renderer.create(element)
+    expect(component.toJSON()).toMatchSnapshot()
   })
 })