Merge pull request #909 from statisticsnorway/MIM-1272_react-testing-…

…library_react-18

Mim 1272 react testing library react 18

.github/workflows/nodejs.yml

@@ -4,20 +4,14 @@ on: [push]
 
 jobs:
   build:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [16, 18]
+    runs-on: 'ubuntu-latest'
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-          architecture: x64
+          node-version: 20
       - name: npm install, build, and test
         run: |
           npm ci
@@ -41,8 +35,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
-          architecture: x64
+          node-version: 20
       - run: npm ci
       - run: npm run build:prod
       - run: npm test

.storybook/main.js

@@ -3,7 +3,6 @@ const path = require('path');
 module.exports = {
     stories: ['../**/*.story.jsx'],
     addons: [
-        '@storybook/addon-actions',
         '@storybook/addon-links'
     ],
     staticDirs: ['../src/media'],

README.md

@@ -108,13 +108,13 @@ Every new instance of `storiesOf` creates a new menu item in the storybook. When
 a sub menu. 
 
 #### Testing
-Testing is done with [Jest](https://jestjs.io/en/) and Enzyme. Write unit tests for all components and aim for a 100% test coverage. 
+Testing is done with [Jest](https://jestjs.io/en/) and React testing library. Write unit tests for all components and aim for a 100% test coverage. [Do no test component internals and state. Test on actual ouput on what user experiences.](https://testing-library.com/docs/guiding-principles)
 To run the tests, simply run `npm test`. To run tests without using any cache, run `npm run clean-test`.
 If you need to replace outdated screenshots, run `npm run clear-tests`.
 
 [Here is a cheat sheet for Jest](https://github.com/sapegin/jest-cheat-sheet).
 
-[Here is a cheat sheet for Enzyme](https://devhints.io/enzyme). 
+[Here is a cheat sheet for Testing library](https://testing-library.com/docs/react-testing-library/cheatsheet/). 
 
 #### Styling
 Styling is done with SCSS. You should familiarise yourself just a bit with the [stylelint](./.stylelintrc) configuration,

jest.config.js

@@ -21,8 +21,7 @@ module.exports = {
 	modulePaths: [
 		'<rootDir>/src/scripts/atoms',
 	],
-	snapshotSerializers: ['enzyme-to-json/serializer'],
-	setupFiles: ['<rootDir>/src/setupTests.js'],
+	setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
 	testMatch: ['**/*.test.jsx'],
 	transform: { '^.+\\.jsx?$': 'babel-jest' },
 	transformIgnorePatterns: ['<rootDir>/node_modules/'],