diff --git a/package.json b/package.json index 4944ec2..a2bed5f 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js index 0bb30c0..59f035e 100644 --- a/src/__tests__/App.test.js +++ b/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( - - - - ) - -const rerenderMount = customState => - mount( - - - - ) +import { defaultState, mockStore } from '../fixtures' +import App from '../App' describe('', () => { it('Should render the component.', () => { - const wrapper = rerenderShallow() - expect(wrapper.html()).toMatchSnapshot() + const container = render( + + + + ) + expect(container.asFragment()).toMatchSnapshot() }) }) diff --git a/src/__tests__/__snapshots__/App.test.js.snap b/src/__tests__/__snapshots__/App.test.js.snap index 97b9c28..2056c41 100644 --- a/src/__tests__/__snapshots__/App.test.js.snap +++ b/src/__tests__/__snapshots__/App.test.js.snap @@ -1,3 +1,84 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` Should render the component. 1`] = `"

Hermes

10 minutes 0 seconds

Cash:

100

Your Ship

Cargo

Location:

Value:
Name:
"`; +exports[` Should render the component. 1`] = ` + +
+

+ Hermes +

+ + 10 minutes 0 seconds + +
+

+ Cash: +

+ + 100 + +
+
+ +
+
+

+ Your Ship +

+

+ Cargo +

+

+ Location: +

+
+ + Value: + +
+ +
+ + Name: + +
+ +
+
+
+ +`; diff --git a/src/__tests__/components/CashDisplay.test.js b/src/__tests__/components/CashDisplay.test.js index 0ce96b6..f13cc26 100644 --- a/src/__tests__/components/CashDisplay.test.js +++ b/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( - - - - ) - -const rerenderMount = customState => - mount( - - - - ) +import { defaultState, mockStore } from '../../fixtures' +import CashDisplay from '../../components/CashDisplay' describe('', () => { it('Should render the component.', () => { - const wrapper = rerenderShallow() - expect(wrapper.html()).toMatchSnapshot() + const container = render( + + + + ) + expect(container.asFragment()).toMatchSnapshot() }) }) diff --git a/src/__tests__/components/ItemTimer.test.js b/src/__tests__/components/ItemTimer.test.js index 4c8da90..9adac97 100644 --- a/src/__tests__/components/ItemTimer.test.js +++ b/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( - - - - ) - -const rerenderMount = customState => - mount( - - - - ) +import { defaultState, mockStore } from '../../fixtures' +import ItemTimer from '../../components/ItemTimer' describe('', () => { it('Should render the component.', () => { - const wrapper = rerenderShallow() - expect(wrapper.html()).toMatchSnapshot() + const container = render( + + + + ) + expect(container.asFragment()).toMatchSnapshot() }) }) diff --git a/src/__tests__/components/Title.test.js b/src/__tests__/components/Title.test.js index 3eedb8e..ad43423 100644 --- a/src/__tests__/components/Title.test.js +++ b/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> - ) - -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() }) }) diff --git a/src/__tests__/components/ViewSelector.test.js b/src/__tests__/components/ViewSelector.test.js index e489927..db4d198 100644 --- a/src/__tests__/components/ViewSelector.test.js +++ b/src/__tests__/components/ViewSelector.test.js @@ -1,53 +1,16 @@ -/** - * @jest-environment node - */ - import React from 'react' -import ViewSelector from '../../components/ViewSelector' -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)}> - <ViewSelector /> - </Provider> - ) - -const rerenderMount = customState => - mount( - <Provider store={mockStore(customState ? customState : defaultState)}> - <ViewSelector /> - </Provider> - ) +import { defaultState, mockStore } from '../../fixtures' +import ViewSelector from '../../components/ViewSelector' describe('<ViewSelector />', () => { it('Should render the <ViewSelector /> component.', () => { - const wrapper = rerenderShallow() - expect(wrapper.html()).toMatchSnapshot() + const container = render( + <Provider store={mockStore(defaultState)}> + <ViewSelector /> + </Provider> + ) + expect(container.asFragment()).toMatchSnapshot() }) }) diff --git a/src/__tests__/components/__snapshots__/CashDisplay.test.js.snap b/src/__tests__/components/__snapshots__/CashDisplay.test.js.snap index 628288c..93483c7 100644 --- a/src/__tests__/components/__snapshots__/CashDisplay.test.js.snap +++ b/src/__tests__/components/__snapshots__/CashDisplay.test.js.snap @@ -1,3 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<CashDisplay /> Should render the <CashDisplay /> component. 1`] = `"<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>"`; +exports[`<CashDisplay /> Should render the <CashDisplay /> component. 1`] = ` +<DocumentFragment> + <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> +</DocumentFragment> +`; diff --git a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap index a12cd6d..8a8665e 100644 --- a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap +++ b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap @@ -1,3 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<ItemTimer /> Should render the <ItemTimer /> component. 1`] = `"<span>10 minutes 0 seconds</span>"`; +exports[`<ItemTimer /> Should render the <ItemTimer /> component. 1`] = ` +<DocumentFragment> + <span> + 10 minutes 0 seconds + </span> +</DocumentFragment> +`; diff --git a/src/__tests__/components/__snapshots__/Title.test.js.snap b/src/__tests__/components/__snapshots__/Title.test.js.snap index 00c033f..fbee73a 100644 --- a/src/__tests__/components/__snapshots__/Title.test.js.snap +++ b/src/__tests__/components/__snapshots__/Title.test.js.snap @@ -1,3 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Title /> Should render the <Title /> component. 1`] = `"<h1 class=\\"StyledHeading-sc-1rdh4aw-0 rfVJR\\">Hermes</h1>"`; +exports[`<Title /> Should render the <Title /> component. 1`] = ` +<DocumentFragment> + <h1 + class="StyledHeading-sc-1rdh4aw-0 rfVJR" + > + Hermes + </h1> +</DocumentFragment> +`; diff --git a/src/__tests__/components/__snapshots__/ViewSelector.test.js.snap b/src/__tests__/components/__snapshots__/ViewSelector.test.js.snap index 17fac56..590d900 100644 --- a/src/__tests__/components/__snapshots__/ViewSelector.test.js.snap +++ b/src/__tests__/components/__snapshots__/ViewSelector.test.js.snap @@ -1,3 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<ViewSelector /> Should render the <ViewSelector /> component. 1`] = `"<div class=\\"StyledBox-sc-13pk1d4-0 dfMVfp\\"><select><option>Ship</option><option>Planets</option></select></div>"`; +exports[`<ViewSelector /> Should render the <ViewSelector /> component. 1`] = ` +<DocumentFragment> + <div + class="StyledBox-sc-13pk1d4-0 dfMVfp" + > + <select> + <option> + Ship + </option> + <option> + Planets + </option> + </select> + </div> +</DocumentFragment> +`; diff --git a/src/fixtures.js b/src/fixtures.js new file mode 100644 index 0000000..078102d --- /dev/null +++ b/src/fixtures.js @@ -0,0 +1,25 @@ +import configureStore from 'redux-mock-store' + +export const defaultState = { + ship: { + cargo: [], + location: { + name: null, + value: null + } + }, + ui: { + view: 'Ship' + }, + user: { + cash: 100 + }, + world: { + isTimerRunning: false, + planets: [] + } +} + +const middlewares = [] + +export const mockStore = configureStore(middlewares) diff --git a/src/setupTests.js b/src/setupTests.js index c487070..0235fb9 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -1,5 +1,5 @@ -import { configure } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import 'jsdom-global/register' +// import { configure } from 'enzyme' +// import Adapter from 'enzyme-adapter-react-16' +// import 'jsdom-global/register' -configure({ adapter: new Adapter() }) +// configure({ adapter: new Adapter() }) diff --git a/yarn.lock b/yarn.lock index 0098fb0..ce5fb81 100644 --- a/yarn.lock +++ b/yarn.lock @@ -756,7 +756,7 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-typescript" "^7.3.2" -"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5": +"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== @@ -1076,6 +1076,11 @@ "@sentry/types" "5.6.1" tslib "^1.9.3" +"@sheerun/mutationobserver-shim@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b" + integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q== + "@svgr/babel-plugin-add-jsx-attribute@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1" @@ -1179,6 +1184,27 @@ "@svgr/plugin-svgo" "^4.3.1" loader-utils "^1.2.3" +"@testing-library/dom@^6.0.0", "@testing-library/dom@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.1.0.tgz#8d5a954158e81ecd7c994907f4ec240296ed823b" + integrity sha512-qivqFvnbVIH3DyArFofEU/jlOhkGIioIemOy9A9M/NQTpPyDDQmtVkAfoB18RKN581f0s/RJMRBbq9WfMIhFTw== + dependencies: + "@babel/runtime" "^7.5.5" + "@sheerun/mutationobserver-shim" "^0.3.2" + "@types/testing-library__dom" "^6.0.0" + aria-query "3.0.0" + pretty-format "^24.8.0" + wait-for-expect "^1.3.0" + +"@testing-library/react@^9.1.3": + version "9.1.3" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.1.3.tgz#3fb495227322ea36cd817532441dabb552e0d6ce" + integrity sha512-qFVo6TsEbpEFpOmKjIxMHDujOKVdvVpcYFcUfJeWBqMO8eja5pN9SZnt6W6AzW3a1MRvRfw3X0Fhx3eXnBJxjA== + dependencies: + "@babel/runtime" "^7.5.5" + "@testing-library/dom" "^6.0.0" + "@types/testing-library__react" "^9.1.0" + "@types/babel__core@^7.1.0": version "7.1.2" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f" @@ -1247,16 +1273,56 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.2.tgz#c4e63af5e8823ce9cc3f0b34f7b998c2171f0c44" integrity sha512-dyYO+f6ihZEtNPDcWNR1fkoTDf3zAK3lAABDze3mz6POyIercH0lEUawUFXlG8xaQZmm1yEBON/4TsYv/laDYg== +"@types/pretty-format@*": + version "20.0.1" + resolved "https://registry.yarnpkg.com/@types/pretty-format/-/pretty-format-20.0.1.tgz#7ce03b403887b087701a2b4534464f48ce7b2f48" + integrity sha512-Oh7wnvVUCtVIWnCHQWe9qDZKn0fGyk5AMq99jXml0x39K59P+z9qe31CNRtop9TceCpS7NmoK+J9eGeCnyFgnw== + +"@types/prop-types@*": + version "15.7.1" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6" + integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg== + "@types/q@^1.5.1": version "1.5.2" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== +"@types/react-dom@*": + version "16.9.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.0.tgz#ba6ddb00bf5de700b0eb91daa452081ffccbfdea" + integrity sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "16.9.2" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268" + integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/stack-utils@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.0.1.tgz#e62c7799a210163ae72b8ac00cc4a841951f9f2d" + integrity sha512-j8wJmvER0VVrmDtab80SwA4MgF0vzFm6hSyk3j2bw9PXyJxgMjFDF8ihJDzo2gUOMP+HpEquHRZcUXOhLmYexA== + dependencies: + "@types/pretty-format" "*" + +"@types/testing-library__react@^9.1.0": + version "9.1.1" + resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.1.tgz#4bcb8bba54b07fbb6c084f2f00e7f9410e587c10" + integrity sha512-8/toTJaIlS3BC7JrK2ElTnbjH8tmFP7atdL2ZsIa1JDmH9RKSm/7Wp5oMDJzXoWr988Mv7ym/XZ8LRglyoGCGw== + dependencies: + "@types/react-dom" "*" + "@types/testing-library__dom" "*" + "@types/yargs-parser@*": version "13.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.0.0.tgz#453743c5bbf9f1bed61d959baab5b06be029b2d0" @@ -1648,7 +1714,7 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" -aria-query@^3.0.0: +aria-query@3.0.0, aria-query@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc" integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w= @@ -3122,6 +3188,11 @@ cssstyle@^1.0.0, cssstyle@^1.1.1, cssstyle@^1.2.2: dependencies: cssom "0.3.x" +csstype@^2.2.0: + version "2.6.6" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41" + integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg== + cyclist@~0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640" @@ -8167,7 +8238,7 @@ pretty-error@^2.1.1: renderkid "^2.0.1" utila "~0.4" -pretty-format@^24.9.0: +pretty-format@^24.8.0, pretty-format@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9" integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA== @@ -10242,6 +10313,11 @@ w3c-xmlserializer@^1.1.2: webidl-conversions "^4.0.2" xml-name-validator "^3.0.0" +wait-for-expect@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.3.0.tgz#65241ce355425f907f5d127bdb5e72c412ff830c" + integrity sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA== + walker@^1.0.7, walker@~1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"