Merge 36133fd into ab24851

package.json

@@ -34,6 +34,8 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
+    "@testing-library/dom": "^6.1.0",
+    "@testing-library/react": "^9.1.3",
     "coveralls": "^3.0.6",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",

src/__tests__/App.test.js

@@ -1,53 +1,16 @@
-/**
- * @jest-environment node
- */
-
 import React from 'react'
-import App from '../App'
-import { mount, shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-
-const middlewares = []
-const mockStore = configureStore(middlewares)
-
-const defaultState = {
-  ship: {
-    cargo: [],
-    location: {
-      name: null,
-      value: null
-    }
-  },
-  ui: {
-    view: 'Ship'
-  },
-  user: {
-    cash: 100
-  },
-  world: {
-    isTimerRunning: false,
-    planets: []
-  }
-}
-
-const rerenderShallow = customState =>
-  shallow(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <App />
-    </Provider>
-  )
-
-const rerenderMount = customState =>
-  mount(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <App />
-    </Provider>
-  )
+import { defaultState, mockStore } from '../fixtures'
+import App from '../App'
 
 describe('<App />', () => {
   it('Should render the <App /> component.', () => {
-    const wrapper = rerenderShallow()
-    expect(wrapper.html()).toMatchSnapshot()
+    const container = render(
+      <Provider store={mockStore(defaultState)}>
+        <App />
+      </Provider>
+    )
+    expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/__snapshots__/App.test.js.snap

@@ -1,3 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<App /> Should render the <App /> component. 1`] = `"<div class=\\"StyledBox-sc-13pk1d4-0 cXRmiT\\"><h1 class=\\"StyledHeading-sc-1rdh4aw-0 rfVJR\\">Hermes</h1><span>10 minutes 0 seconds</span><div class=\\"StyledBox-sc-13pk1d4-0 CAsMy\\"><h2 class=\\"StyledHeading-sc-1rdh4aw-0 gBloPj\\">Cash:</h2><span class=\\"StyledText-sc-1sadyjn-0 fWSbXS\\">100</span></div><div class=\\"StyledBox-sc-13pk1d4-0 dfMVfp\\"><select><option>Ship</option><option>Planets</option></select></div><div><h2>Your Ship</h2><h3>Cargo</h3><h3>Location:</h3><div class=\\"StyledBox-sc-13pk1d4-0 MmWcm\\"><span class=\\"StyledText-sc-1sadyjn-0 isVaoK\\">Value:</span><div class=\\"StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL\\"></div><span class=\\"StyledText-sc-1sadyjn-0 gNZQxf\\"></span><div class=\\"StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL\\"></div><span class=\\"StyledText-sc-1sadyjn-0 isVaoK\\">Name:</span><div class=\\"StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL\\"></div><span class=\\"StyledText-sc-1sadyjn-0 gNZQxf\\"></span></div></div></div>"`;
+exports[`<App /> Should render the <App /> component. 1`] = `
+<DocumentFragment>
+  <div
+    class="StyledBox-sc-13pk1d4-0 cXRmiT"
+  >
+    <h1
+      class="StyledHeading-sc-1rdh4aw-0 rfVJR"
+    >
+      Hermes
+    </h1>
+    <span>
+      10 minutes 0 seconds
+    </span>
+    <div
+      class="StyledBox-sc-13pk1d4-0 CAsMy"
+    >
+      <h2
+        class="StyledHeading-sc-1rdh4aw-0 gBloPj"
+      >
+        Cash:
+      </h2>
+      <span
+        class="StyledText-sc-1sadyjn-0 fWSbXS"
+      >
+        100
+      </span>
+    </div>
+    <div
+      class="StyledBox-sc-13pk1d4-0 dfMVfp"
+    >
+      <select>
+        <option>
+          Ship
+        </option>
+        <option>
+          Planets
+        </option>
+      </select>
+    </div>
+    <div>
+      <h2>
+        Your Ship
+      </h2>
+      <h3>
+        Cargo
+      </h3>
+      <h3>
+        Location:
+      </h3>
+      <div
+        class="StyledBox-sc-13pk1d4-0 MmWcm"
+      >
+        <span
+          class="StyledText-sc-1sadyjn-0 isVaoK"
+        >
+          Value:
+        </span>
+        <div
+          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+        />
+        <span
+          class="StyledText-sc-1sadyjn-0 gNZQxf"
+        />
+        <div
+          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+        />
+        <span
+          class="StyledText-sc-1sadyjn-0 isVaoK"
+        >
+          Name:
+        </span>
+        <div
+          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+        />
+        <span
+          class="StyledText-sc-1sadyjn-0 gNZQxf"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/__tests__/components/CashDisplay.test.js

@@ -1,53 +1,16 @@
-/**
- * @jest-environment node
- */
-
 import React from 'react'
-import CashDisplay from '../../components/CashDisplay'
-import { mount, shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-
-const middlewares = []
-const mockStore = configureStore(middlewares)
-
-const defaultState = {
-  ship: {
-    cargo: [],
-    location: {
-      name: null,
-      value: null
-    }
-  },
-  ui: {
-    view: 'Ship'
-  },
-  user: {
-    cash: 100
-  },
-  world: {
-    isTimerRunning: false,
-    planets: []
-  }
-}
-
-const rerenderShallow = customState =>
-  shallow(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <CashDisplay />
-    </Provider>
-  )
-
-const rerenderMount = customState =>
-  mount(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <CashDisplay />
-    </Provider>
-  )
+import { defaultState, mockStore } from '../../fixtures'
+import CashDisplay from '../../components/CashDisplay'
 
 describe('<CashDisplay />', () => {
   it('Should render the <CashDisplay /> component.', () => {
-    const wrapper = rerenderShallow()
-    expect(wrapper.html()).toMatchSnapshot()
+    const container = render(
+      <Provider store={mockStore(defaultState)}>
+        <CashDisplay />
+      </Provider>
+    )
+    expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/components/ItemTimer.test.js

@@ -1,53 +1,16 @@
-/**
- * @jest-environment node
- */
-
 import React from 'react'
-import ItemTimer from '../../components/ItemTimer'
-import { mount, shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-
-const middlewares = []
-const mockStore = configureStore(middlewares)
-
-const defaultState = {
-  ship: {
-    cargo: [],
-    location: {
-      name: null,
-      value: null
-    }
-  },
-  ui: {
-    view: 'Ship'
-  },
-  user: {
-    cash: 100
-  },
-  world: {
-    isTimerRunning: false,
-    planets: []
-  }
-}
-
-const rerenderShallow = customState =>
-  shallow(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <ItemTimer />
-    </Provider>
-  )
-
-const rerenderMount = customState =>
-  mount(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <ItemTimer />
-    </Provider>
-  )
+import { defaultState, mockStore } from '../../fixtures'
+import ItemTimer from '../../components/ItemTimer'
 
 describe('<ItemTimer />', () => {
   it('Should render the <ItemTimer /> component.', () => {
-    const wrapper = rerenderShallow()
-    expect(wrapper.html()).toMatchSnapshot()
+    const container = render(
+      <Provider store={mockStore(defaultState)}>
+        <ItemTimer />
+      </Provider>
+    )
+    expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/components/Title.test.js

@@ -1,53 +1,10 @@
-/**
- * @jest-environment node
- */
-
 import React from 'react'
+import { render } from '@testing-library/react'
 import Title from '../../components/Title'
-import { mount, shallow } from 'enzyme'
-import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-
-const middlewares = []
-const mockStore = configureStore(middlewares)
-
-const defaultState = {
-  ship: {
-    cargo: [],
-    location: {
-      name: null,
-      value: null
-    }
-  },
-  ui: {
-    view: 'Ship'
-  },
-  user: {
-    cash: 100
-  },
-  world: {
-    isTimerRunning: false,
-    planets: []
-  }
-}
-
-const rerenderShallow = customState =>
-  shallow(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <Title />
-    </Provider>
-  )
-
-const rerenderMount = customState =>
-  mount(
-    <Provider store={mockStore(customState ? customState : defaultState)}>
-      <Title />
-    </Provider>
-  )
 
 describe('<Title />', () => {
   it('Should render the <Title /> component.', () => {
-    const wrapper = rerenderShallow()
-    expect(wrapper.html()).toMatchSnapshot()
+    const container = render(<Title />)
+    expect(container.asFragment()).toMatchSnapshot()
   })
 })