fix test

README.md

@@ -79,10 +79,20 @@ To run all tests, including all linting tests:
 npm test
 ```
 
-For local development, you can start the test runner in interactive watch mode:
+For local development, you can start the test runners for client & server in a watch mode.
 
 ```bash
-npm test:watch
+npm run test:watch
+```
+
+This will work for daily development but it misses the full interactivity of the test runner. If you need that, you will need to run them in individual terminal sessions:
+
+```bash
+cd client/
+npm run test:watch
+
+cd server/
+npm run test:watch
 ```
 
 ## ✨ Code Style

client/src/App.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { render } from 'react-testing-library'
 import App from './App'
 
-it('renders without crashing', () => {
-    const div = document.createElement('div')
-    ReactDOM.render(<App />, div)
-    ReactDOM.unmountComponentAtNode(div)
+describe('App', () => {
+    it('renders without crashing', () => {
+        const { container } = render(<App />)
+        expect(container.firstChild).toBeInTheDocument()
+    })
 })

client/src/components/atoms/CategoryImage.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render } from 'react-testing-library'
+import slugify from 'slugify'
+import CategoryImage from './CategoryImage'
+import formPublish from '../../data/form-publish.json'
+
+describe('CategoryImage', () => {
+    it('renders fallback image', () => {
+        const { container, getByTestId } = render(
+            <CategoryImage data-testid="image" category={''} />
+        )
+        expect(container.firstChild).toBeInTheDocument()
+        expect(getByTestId('image').style.backgroundImage).toMatch(
+            /jellyfish-back/
+        )
+    })
+
+    it('renders all the category images', () => {
+        const { options } = formPublish.steps[1].fields
+            ? formPublish.steps[1].fields.categories
+            : []
+
+        options.map((category: string) => {
+            const { getByTestId } = render(
+                <CategoryImage data-testid="image" category={category} />
+            )
+            expect(getByTestId('image')).toBeInTheDocument()
+            // expect(getByTestId('image').style.backgroundImage).toMatch(
+            //     slugify(category, { lower: true })
+            // )
+        })
+    })
+})

client/src/components/atoms/CategoryImage.tsx

@@ -148,6 +148,7 @@ export default class CategoryImage extends PureComponent<{ category: string }> {
                 style={{
                     backgroundImage: `url(${image})`
                 }}
+                {...this.props}
             />
         )
     }

client/src/components/atoms/Form/Input.tsx

@@ -70,7 +70,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                 value: date
             }
         }
-        this.props.onChange!(event as any)
+        this.props.onChange!(event as any) // eslint-disable-line @typescript-eslint/no-non-null-assertion
     }
 
     public InputComponent = () => {

client/src/components/molecules/Pagination.tsx

@@ -17,17 +17,17 @@ export default class Pagination extends PureComponent<
     PaginationState
 > {
     public state = { smallViewport: true }
-    private mq = matchMedia && window.matchMedia('(min-width: 600px)')
+    private mq = window.matchMedia && window.matchMedia('(min-width: 600px)')
 
     public componentDidMount() {
-        if (matchMedia) {
+        if (window.matchMedia) {
             this.mq.addListener(this.viewportChange)
             this.viewportChange(this.mq)
         }
     }
 
     public componentWillUnmount() {
-        if (matchMedia) {
+        if (window.matchMedia) {
             this.mq.removeListener(this.viewportChange)
         }
     }

package.json

@@ -8,6 +8,7 @@
     "start": "concurrently \"cd client && npm start\" \"cd server && npm start\"",
     "build": "./scripts/build.sh",
     "test": "npm run lint && scripts/test.sh",
+    "test:watch": "npm run lint && concurrently \"cd client && npm run test:watch\" \"cd server && npm run test:watch\"",
     "format:js": "prettier --parser typescript --write '**/*.{js,jsx,ts,tsx}'",
     "format:css": "prettier-stylelint --ignore-path .gitignore --write --quiet '**/*.{css,scss}'",
     "format": "npm run format:js && npm run format:css",

server/package.json

@@ -9,7 +9,7 @@
     "serve": "node dist/server.js",
     "build": "tsc",
     "test": "jest --coverage",
-    "test-watch": "npm run test --watchAll"
+    "test:watch": "jest --coverage --watch"
   },
   "dependencies": {
     "body-parser": "^1.18.3",