feat: migrate unit tests to Jest (#6353)

* config(jest): updated setup
* config(jest): update testMatch to include jsx files
* config(jest): add transformIgnorePatterns
* config(jest): update ignore files that do not work in jest yet
* config: add test:unit-jest to test script

* fix(jest): lint with eslint-plugin-jest

* refactor(jest): move unit test directory
* refactor(mocha): restore mocha tests that fail in jest

* docs(jest): update helpful scripts with test:unit-jest

test/unit/core/system/wrapComponent.jsx

@@ -0,0 +1,247 @@
+import React from "react"
+
+import { render } from "enzyme"
+import System from "core/system"
+
+describe("wrapComponents", () => {
+  describe("should wrap a component and provide a reference to the original", () => {
+    it("with stateless components", function(){
+      // Given
+      const system = new System({
+        plugins: [
+          {
+            components: {
+              wow: ({ name }) => <div>{name} component</div>
+            }
+          },
+          {
+            wrapComponents: {
+              wow: (OriginalComponent) => (props) => {
+                return <container>
+                  <OriginalComponent {...props}></OriginalComponent>
+                  <OriginalComponent name="Wrapped"></OriginalComponent>
+                </container>
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      let Component = system.getSystem().getComponents("wow")
+      const wrapper = render(<Component name="Normal" />)
+
+      const container = wrapper.children().first()
+      expect(container[0].name).toEqual("container")
+
+      const children = container.children()
+      expect(children.length).toEqual(2)
+      expect(children.eq(0).text()).toEqual("Normal component")
+      expect(children.eq(1).text()).toEqual("Wrapped component")
+    })
+
+    it("with React classes", function(){
+      class MyComponent extends React.Component {
+        render() {
+          return <div>{this.props.name} component</div>
+        }
+      }
+
+      // Given
+      const system = new System({
+        plugins: [
+          {
+            components: {
+              wow: MyComponent
+            }
+          },
+          {
+            wrapComponents: {
+              wow: (OriginalComponent) => {
+                return class WrapperComponent extends React.Component {
+                  render() {
+                    return <container>
+                      <OriginalComponent {...this.props}></OriginalComponent>
+                      <OriginalComponent name="Wrapped"></OriginalComponent>
+                    </container>
+                  }
+                }
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      let Component = system.getSystem().getComponents("wow")
+      const wrapper = render(<Component name="Normal" />)
+
+      const container = wrapper.children().first()
+      expect(container[0].name).toEqual("container")
+
+      const children = container.children()
+      expect(children.length).toEqual(2)
+      expect(children.eq(0).text()).toEqual("Normal component")
+      expect(children.eq(1).text()).toEqual("Wrapped component")
+    })
+  })
+
+  it("should provide a reference to the system to the wrapper", function(){
+
+    // Given
+
+    const mySystem = new System({
+      plugins: [
+        {
+          // Make a selector
+          statePlugins: {
+            doge: {
+              selectors: {
+                wow: () => () => {
+                  return "WOW much data"
+                }
+              }
+            }
+          }
+        },
+        {
+          // Create a component
+          components: {
+            wow: () => <div>Original component</div>
+          }
+        },
+        {
+          // Wrap the component and use the system
+          wrapComponents: {
+            wow: (OriginalComponent, system) => (props) => {
+              return <container>
+                <OriginalComponent {...props}></OriginalComponent>
+                <div>{system.dogeSelectors.wow()}</div>
+              </container>
+            }
+          }
+        }
+      ]
+    })
+
+    // Then
+    let Component = mySystem.getSystem().getComponents("wow")
+    const wrapper = render(<Component name="Normal" />)
+
+    const container = wrapper.children().first()
+    expect(container[0].name).toEqual("container")
+
+    const children = container.children()
+    expect(children.length).toEqual(2)
+    expect(children.eq(0).text()).toEqual("Original component")
+    expect(children.eq(1).text()).toEqual("WOW much data")
+  })
+
+  it("should wrap correctly when registering more plugins", function(){
+
+    // Given
+
+    const mySystem = new System({
+      plugins: [
+        () => {
+          return {
+            statePlugins: {
+              doge: {
+                selectors: {
+                  wow: () => () => {
+                    return "WOW much data"
+                  }
+                }
+              }
+            },
+            components: {
+              wow: () => <div>Original component</div>
+            }
+          }
+        }
+      ]
+    })
+
+    mySystem.register([
+      function() {
+        return {
+          // Wrap the component and use the system
+          wrapComponents: {
+            wow: (OriginalComponent, system) => (props) => {
+              return <container>
+                <OriginalComponent {...props}></OriginalComponent>
+                <div>{system.dogeSelectors.wow()}</div>
+              </container>
+            }
+          }
+        }
+      }
+    ])
+
+    // Then
+    let Component = mySystem.getSystem().getComponents("wow")
+    const wrapper = render(<Component name="Normal" />)
+
+    const container = wrapper.children().first()
+    expect(container[0].name).toEqual("container")
+
+    const children = container.children()
+    expect(children.length).toEqual(2)
+    expect(children.eq(0).text()).toEqual("Original component")
+    expect(children.eq(1).text()).toEqual("WOW much data")
+  })
+
+  it("should wrap correctly when building a system twice", function(){
+
+    // Given
+
+    const pluginOne = {
+      statePlugins: {
+        doge: {
+          selectors: {
+            wow: () => () => {
+              return "WOW much data"
+            }
+          }
+        }
+      },
+      components: {
+        wow: () => <div>Original component</div>
+      }
+    }
+
+    const pluginTwo = {
+      // Wrap the component and use the system
+      wrapComponents: {
+        wow: (OriginalComponent, system) => (props) => {
+          return <container>
+            <OriginalComponent {...props}></OriginalComponent>
+            <div>{system.dogeSelectors.wow()}</div>
+          </container>
+        }
+      }
+    }
+
+    const bothPlugins = () => [pluginOne, pluginTwo]
+
+    new System({
+      plugins: bothPlugins
+    })
+
+    const secondSystem = new System({
+      plugins: bothPlugins
+    })
+
+    // Then
+    let Component = secondSystem.getSystem().getComponents("wow")
+    const wrapper = render(<Component name="Normal" />)
+
+    const container = wrapper.children().first()
+    expect(container[0].name).toEqual("container")
+
+    const children = container.children()
+    expect(children.length).toEqual(2)
+    expect(children.eq(0).text()).toEqual("Original component")
+    expect(children.eq(1).text()).toEqual("WOW much data")
+  })
+})