Første steg i den lange veien mot å blå kvitt enzyme

package.json

@@ -95,10 +95,10 @@
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/theming": "7.5.3",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/dom": "8.20.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "14.1.0",
+    "@testing-library/user-event": "14.5.1",
     "@types/chai": "4.3.9",
     "@types/enzyme": "3.10.15",
     "@types/history": "5.0.0",

packages/behandling-anke/src/components/AnkeProsess.spec.tsx

@@ -1,7 +1,3 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-import sinon from 'sinon';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
 import behandlingStatus from '@fpsak-frontend/kodeverk/src/behandlingStatus';
@@ -10,10 +6,13 @@ import fagsakStatus from '@fpsak-frontend/kodeverk/src/fagsakStatus';
 import fagsakYtelseType from '@fpsak-frontend/kodeverk/src/fagsakYtelseType';
 import personstatusType from '@fpsak-frontend/kodeverk/src/personstatusType';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
-import { ProsessStegContainer } from '@k9-sak-web/behandling-felles';
-import { Behandling, Fagsak, Vilkar } from '@k9-sak-web/types';
-
+import { renderWithIntl } from '@fpsak-frontend/utils-test/src/test-utils';
 import { K9sakApiKeys, requestApi } from '@k9-sak-web/sak-app/src/data/k9sakApi';
+import { Behandling, Fagsak, Vilkar } from '@k9-sak-web/types';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import sinon from 'sinon';
 import AnkeProsess from './AnkeProsess';
 
 describe('<AnkeProsess>', () => {
@@ -74,7 +73,7 @@ describe('<AnkeProsess>', () => {
 
   it('skal vise alle aktuelle prosessSteg i meny', () => {
     requestApi.mock(K9sakApiKeys.FEATURE_TOGGLE, []);
-    const wrapper = shallow(
+    renderWithIntl(
       <AnkeProsess
         data={{ aksjonspunkter, vilkar, ankeVurdering }}
         fagsak={fagsak}
@@ -90,40 +89,15 @@ describe('<AnkeProsess>', () => {
         setBehandling={sinon.spy()}
       />,
     );
-
-    const meny = wrapper.find(ProsessStegContainer);
-    expect(meny.prop('formaterteProsessStegPaneler')).toEqual([
-      {
-        isActive: false,
-        isDisabled: false,
-        isFinished: false,
-        labelId: 'Behandlingspunkt.Ankebehandling',
-        type: 'default',
-        usePartialStatus: false,
-      },
-      {
-        isActive: false,
-        isDisabled: false,
-        isFinished: false,
-        labelId: 'Behandlingspunkt.AnkeResultat',
-        type: 'default',
-        usePartialStatus: false,
-      },
-      {
-        isActive: false,
-        isDisabled: false,
-        isFinished: false,
-        labelId: 'Behandlingspunkt.AnkeMerknader',
-        type: 'default',
-        usePartialStatus: false,
-      },
-    ]);
+    expect(screen.getByRole('button', { name: 'Ankebehandling' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Resultat' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Merknader' })).toBeInTheDocument();
   });
 
-  it('skal sette nytt valgt prosessSteg ved trykk i meny', () => {
+  it('skal sette nytt valgt prosessSteg ved trykk i meny', async () => {
     requestApi.mock(K9sakApiKeys.FEATURE_TOGGLE, []);
     const oppdaterProsessStegOgFaktaPanelIUrl = sinon.spy();
-    const wrapper = shallow(
+    renderWithIntl(
       <AnkeProsess
         data={{ aksjonspunkter, vilkar, ankeVurdering }}
         fagsak={fagsak}
@@ -139,11 +113,10 @@ describe('<AnkeProsess>', () => {
         setBehandling={sinon.spy()}
       />,
     );
-
-    const meny = wrapper.find(ProsessStegContainer);
-
-    meny.prop('velgProsessStegPanelCallback')(2);
-
+    userEvent.click(screen.getByRole('button', { name: 'Merknader' }));
+    await waitFor(() => {
+      expect(oppdaterProsessStegOgFaktaPanelIUrl.callCount).toBeGreaterThan(0);
+    });
     const opppdaterKall = oppdaterProsessStegOgFaktaPanelIUrl.getCalls();
     expect(opppdaterKall).toHaveLength(1);
     expect(opppdaterKall[0].args).toHaveLength(2);

yarn.lock

@@ -12,7 +12,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/css-tools@npm:^4.0.1":
+"@adobe/css-tools@npm:^4.3.1":
   version: 4.3.1
   resolution: "@adobe/css-tools@npm:4.3.1"
   checksum: ad43456379ff391132aff687ece190cb23ea69395e23c9b96690eeabe2468da89a4aaf266e4f8b6eaab53db3d1064107ce0f63c3a974e864f4a04affc768da3f
@@ -9377,7 +9377,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:8.20.1, @testing-library/dom@npm:^8.0.0, @testing-library/dom@npm:^8.11.1":
+"@testing-library/dom@npm:9.3.3, @testing-library/dom@npm:^9.0.0":
+  version: 9.3.3
+  resolution: "@testing-library/dom@npm:9.3.3"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.1.3
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    pretty-format: ^27.0.2
+  checksum: 34e0a564da7beb92aa9cc44a9080221e2412b1a132eb37be3d513fe6c58027674868deb9f86195756d98d15ba969a30fe00632a4e26e25df2a5a4f6ac0686e37
+  languageName: node
+  linkType: hard
+
+"@testing-library/dom@npm:^8.11.1":
   version: 8.20.1
   resolution: "@testing-library/dom@npm:8.20.1"
   dependencies:
@@ -9393,45 +9409,56 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^5.17.0":
-  version: 5.17.0
-  resolution: "@testing-library/jest-dom@npm:5.17.0"
+"@testing-library/jest-dom@npm:^6.1.4":
+  version: 6.1.4
+  resolution: "@testing-library/jest-dom@npm:6.1.4"
   dependencies:
-    "@adobe/css-tools": ^4.0.1
+    "@adobe/css-tools": ^4.3.1
     "@babel/runtime": ^7.9.2
-    "@types/testing-library__jest-dom": ^5.9.1
     aria-query: ^5.0.0
     chalk: ^3.0.0
     css.escape: ^1.5.1
     dom-accessibility-api: ^0.5.6
     lodash: ^4.17.15
     redent: ^3.0.0
-  checksum: 9f28dbca8b50d7c306aae40c3aa8e06f0e115f740360004bd87d57f95acf7ab4b4f4122a7399a76dbf2bdaaafb15c99cc137fdcb0ae457a92e2de0f3fbf9b03b
+  peerDependencies:
+    "@jest/globals": ">= 28"
+    "@types/jest": ">= 28"
+    jest: ">= 28"
+    vitest: ">= 0.32"
+  peerDependenciesMeta:
+    "@jest/globals":
+      optional: true
+    "@types/jest":
+      optional: true
+    jest:
+      optional: true
+    vitest:
+      optional: true
+  checksum: c6bd9469554136a25d94b55ea16736d56b8c5d200526023774dbf35ca35551a721257e6734f1b404bbd07ae0a1950f1912b5be60e113db2ff2ff50af14f7085c
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:12.1.5":
-  version: 12.1.5
-  resolution: "@testing-library/react@npm:12.1.5"
+"@testing-library/react@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@testing-library/react@npm:14.1.0"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.0.0
-    "@types/react-dom": <18.0.0
+    "@testing-library/dom": ^9.0.0
+    "@types/react-dom": ^18.0.0
   peerDependencies:
-    react: <18.0.0
-    react-dom: <18.0.0
-  checksum: 4abd0490405e709a7df584a0db604e508a4612398bb1326e8fa32dd9393b15badc826dcf6d2f7525437886d507871f719f127b9860ed69ddd204d1fa834f576a
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: e76681911947f0981a1a72802ea01abeacdc4973c62deaf19c206cb9ff8d23eff5e3888c572303614686f029ee8a2a2dad6d0f0a9fb222944dbd9e0ea573b248
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:13.5.0":
-  version: 13.5.0
-  resolution: "@testing-library/user-event@npm:13.5.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
+"@testing-library/user-event@npm:14.5.1":
+  version: 14.5.1
+  resolution: "@testing-library/user-event@npm:14.5.1"
   peerDependencies:
     "@testing-library/dom": ">=7.21.4"
-  checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549
+  checksum: 3e6bc9fd53dfe2f3648190193ed2fd4bca2a1bfb47f68810df3b33f05412526e5fd5c4ef9dc5375635e0f4cdf1859916867b597eed22bda1321e04242ea6c519
   languageName: node
   linkType: hard
 
@@ -9786,16 +9813,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:*":
-  version: 29.5.8
-  resolution: "@types/jest@npm:29.5.8"
-  dependencies:
-    expect: ^29.0.0
-    pretty-format: ^29.0.0
-  checksum: ca8438a5b4c098c8c023e9d5b279ea306494a1d0b5291cfb498100fa780377145f068b2a021d545b0398bbe0328dcc37044dd3aaf3c6c0fe9b0bef7b46a63453
-  languageName: node
-  linkType: hard
-
 "@types/jest@npm:29.5.7":
   version: 29.5.7
   resolution: "@types/jest@npm:29.5.7"
@@ -9989,12 +10006,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:<18.0.0":
-  version: 17.0.23
-  resolution: "@types/react-dom@npm:17.0.23"
+"@types/react-dom@npm:^18.0.0":
+  version: 18.2.15
+  resolution: "@types/react-dom@npm:18.2.15"
   dependencies:
-    "@types/react": ^17
-  checksum: 20c3caadc653c47806d8eb9bfe1bc5c259bd8d05158bd9cc71f42277a0425f0bf461d45c08648bac6d9fb468536d0b0b28fe548541c95c157de72a4487f7af97
+    "@types/react": "*"
+  checksum: 8e9631600c21ff561328e38a951d1991b3b3b20f538af4c0efbd1327c883a5573a63f50e1b945c34fa51b114b30e1ca5e62317bd54f21e063d6697b4be843a03
   languageName: node
   linkType: hard
 
@@ -10061,17 +10078,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^17":
-  version: 17.0.70
-  resolution: "@types/react@npm:17.0.70"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: 24e6051f1beaa96ee40e918d72b44df55224cde4489606266e8bc8f72f5fda561161b453b89348db8b13c54562e81127448f58b1e949904687084beeeeda5a36
-  languageName: node
-  linkType: hard
-
 "@types/redux-form@npm:8.3.8":
   version: 8.3.8
   resolution: "@types/redux-form@npm:8.3.8"
@@ -10174,15 +10180,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/testing-library__jest-dom@npm:^5.9.1":
-  version: 5.14.9
-  resolution: "@types/testing-library__jest-dom@npm:5.14.9"
-  dependencies:
-    "@types/jest": "*"
-  checksum: d364494fc2545316292e88861146146af1e3818792ca63b62a63758b2f737669b687f4aaddfcfbcb7d0e1ed7890a9bd05de23ff97f277d5e68de574497a9ee72
-  languageName: node
-  linkType: hard
-
 "@types/tough-cookie@npm:*":
   version: 4.0.5
   resolution: "@types/tough-cookie@npm:4.0.5"
@@ -18342,10 +18339,10 @@ __metadata:
     "@storybook/testing-react": 2.0.1
     "@storybook/theming": 7.5.3
     "@svgr/webpack": 8.1.0
-    "@testing-library/dom": 8.20.1
-    "@testing-library/jest-dom": ^5.17.0
-    "@testing-library/react": 12.1.5
-    "@testing-library/user-event": 13.5.0
+    "@testing-library/dom": 9.3.3
+    "@testing-library/jest-dom": ^6.1.4
+    "@testing-library/react": 14.1.0
+    "@testing-library/user-event": 14.5.1
     "@types/chai": 4.3.9
     "@types/enzyme": 3.10.15
     "@types/history": 5.0.0