Vitest

.github/workflows/test.yml

@@ -29,4 +29,4 @@ jobs:
         run: HUSKY=0 yarn install --immutable
 
       - name: Kjører tester
-        run: yarn test:all --maxWorkers=2 --silent
+        run: yarn test --silent

@types/externals.d.ts

@@ -1,4 +1,10 @@
-declare module '*.svg';
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
 declare module '*.less';
 declare module '*.css';
 declare module '*.module.css';

eslint/eslintrc.common.js

@@ -12,6 +12,7 @@ const config = {
 
   globals: {
     VERSION: 'off',
+    vi: true,
   },
 
   parser: '@typescript-eslint/parser',

lerna.json

@@ -1,5 +1,6 @@
 {
   "packages": ["packages/*"],
   "version": "independent",
-  "npmClient": "yarn"
+  "npmClient": "yarn",
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -10,12 +10,11 @@
     "url": "git+https://github.com/navikt/k9-sak-web.git"
   },
   "scripts": {
-    "test": "jest -o --colors",
-    "test:all": "jest --colors",
-    "test:all:testonly": "jest --colors --selectProjects test",
-    "test:watch": "jest --watch --colors --silent=false",
-    "test:watch:all": "jest --watchAll --colors",
-    "test:coverage": "jest --coverage --colors --selectProjects test",
+    "test": "vitest",
+    "test:all:testonly": "vitest --selectProjects test",
+    "test:watch": "vitest --watch --silent=false",
+    "test:watch:all": "vitest --watchAll",
+    "test:coverage": "vitest --coverage --selectProjects test",
     "ts-check": "tsc  --pretty",
     "lint": "eslint --cache packages --ext .ts,.tsx,.js,.jsx",
     "lint:fix": "eslint --fix --cache packages --ext .ts,.tsx,.js,.jsx",
@@ -35,7 +34,7 @@
     "storybook": "storybook dev -p 9001",
     "deploy-storybook": "storybook build -o .static_storybook && storybook-to-ghpages --existing-output-dir=.static_storybook",
     "prepare": "husky install",
-    "sentry-release": "(SENTRY_RELEASE=$(git rev-parse --short HEAD); node ./scripts/sentry-release)"
+    "sentry-release": "(export SENTRY_RELEASE=$(git rev-parse --short HEAD); node ./scripts/sentry-release)"
   },
   "workspaces": [
     "packages/*"
@@ -95,7 +94,7 @@
     "@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/jest-dom": "^6.1.3",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
     "@types/chai": "4.3.9",
@@ -110,6 +109,7 @@
     "@types/sinon": "10.0.20",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
+    "@vitejs/plugin-react": "^4.0.4",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "autoprefixer": "^10.4.16",
     "axios-mock-adapter": "1.22.0",
@@ -138,6 +138,7 @@
     "eslint-plugin-storybook": "0.6.15",
     "external-remotes-plugin": "1.0.0",
     "file-loader": "6.2.0",
+    "happy-dom": "^11.0.2",
     "html-webpack-plugin": "5.5.3",
     "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
@@ -170,6 +171,9 @@
     "terser-webpack-plugin": "5.3.9",
     "thread-loader": "4.0.2",
     "typescript": "5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vitest": "^0.34.3",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",

packages/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/fakta-barn-og-overfoeringsdager/src/components/FastBreddeAligner.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import FastBreddeAligner from './FastBreddeAligner';
 
 it('renders all columns with given content', () => {

packages/fakta-bosted-soker/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@fpsak-frontend/fakta-bosted-soker",
   "version": "1.0.0",
-  "module": "index.jsx",
+  "main": "index.ts",
+  "module": "index.ts",
   "license": "MIT",
   "private": true,
   "dependencies": {

packages/fakta-feilutbetaling/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fpsak-frontend/fakta-feilutbetaling",
   "version": "1.0.0",
-  "module": "index.jsx",
+  "module": "index.ts",
   "license": "MIT",
   "private": true,
   "dependencies": {

packages/fakta-felles/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@k9-sak-web/fakta-felles",
   "version": "1.0.0",
+  "main": "index.ts",
   "module": "index.ts",
   "license": "MIT",
   "private": true,

packages/fakta-inntekt-og-ytelser/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fpsak-frontend/fakta-inntekt-og-ytelser",
   "version": "1.0.0",
-  "module": "index.jsx",
+  "module": "index.ts",
   "license": "MIT",
   "private": true,
   "dependencies": {

packages/fakta-institusjon/src/InstitusjonFerdigVisning.tsx

@@ -2,7 +2,7 @@ import { InstitusjonVurderingMedPerioder, Vurderingsresultat } from '@k9-sak-web
 import { Calender } from '@navikt/ds-icons';
 import { AssessedBy, Box, DetailView, LabelledContent, LinkButton, Margin } from '@navikt/ft-plattform-komponenter';
 import React from 'react';
-import styles from './institusjonFerdigVisning.modules.css';
+import styles from './institusjonFerdigVisning.module.css';
 
 interface OwnProps {
   vurdering: InstitusjonVurderingMedPerioder;

packages/fakta-institusjon/src/InstitusjonNavigation.tsx

@@ -2,7 +2,7 @@ import { InstitusjonPerioderMedResultat } from '@k9-sak-web/types';
 import { Heading } from '@navikt/ds-react';
 import { InteractiveList } from '@navikt/ft-plattform-komponenter';
 import React, { useEffect } from 'react';
-import styles from './InstitusjonNavigation.modules.css';
+import styles from './InstitusjonNavigation.module.css';
 import PeriodeRad from './PeriodeRad';
 import institusjonStatus from './konstanter';
 

packages/fakta-institusjon/src/PeriodeRad.tsx

@@ -9,7 +9,7 @@ import {
 } from '@navikt/ft-plattform-komponenter';
 import { Period } from '@navikt/k9-fe-period-utils';
 import React from 'react';
-import styles from './periodeRad.modules.css';
+import styles from './periodeRad.module.css';
 
 interface OwnProps {
   perioder: Period[];

packages/fakta-medlemskap/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fpsak-frontend/fakta-medlemskap",
   "version": "1.0.0",
-  "module": "index.jsx",
+  "module": "index.ts",
   "license": "MIT",
   "private": true,
   "dependencies": {

packages/fakta-opplaering/src/OpplaeringContainer.tsx

@@ -9,7 +9,7 @@ import Tabs from './Tabs';
 import GjennomgaaOpplaeringOversikt from './gjennomgaaOpplaering/GjennomgaaOpplaeringOversikt';
 import messages from './i18n/nb_NO.json';
 import NoedvendighetOversikt from './noedvendighet/NoedvendighetOversikt';
-import styles from './opplaeringContainer.modules.css';
+import styles from './opplaeringContainer.module.css';
 import ReisetidOversikt from './reisetid/ReisetidOversikt';
 
 interface TabItemProps {

packages/fakta-opplaering/src/components/DokumenterIVurderingen.tsx

@@ -3,7 +3,7 @@ import Ikon from 'nav-frontend-ikoner-assets';
 import React, { useState } from 'react';
 
 import DokumentLink from './DokumentLink';
-import styles from './dokumenterIVurderingen.modules.css';
+import styles from './dokumenterIVurderingen.module.css';
 import FilterList from './filter-list/FilterList';
 
 const DokumenterIVurderingen = ({ dokumenter, onChange, onBlur, error, valgteDokumenter }) => {

packages/fakta-opplaering/src/components/PeriodeRad.tsx

@@ -7,7 +7,7 @@ import {
 } from '@navikt/ft-plattform-komponenter';
 import { Period } from '@navikt/k9-fe-period-utils';
 import React from 'react';
-import styles from './periodeRad.modules.css';
+import styles from './periodeRad.module.css';
 
 interface OwnProps {
   periode?: Period;

packages/fakta-opplaering/src/components/filter-list/FilterList.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Chevron from 'nav-frontend-chevron';
 import React, { useState } from 'react';
 import OutsideClickHandler from 'react-outside-click-handler';
-import styles from './filterList.modules.css';
+import styles from './filterList.module.css';
 
 interface ChevronWithTextProps {
   chevronDirection: 'opp' | 'ned';

packages/fakta-opplaering/src/components/rangeDatepicker/RangeDatepicker.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { DatePicker, DatePickerProps, DateValidationT, RangeValidationT, useRangeDatepicker } from '@navikt/ds-react';
 import dayjs from 'dayjs';
-import styles from './rangeDatepicker.modules.css';
+import styles from './rangeDatepicker.module.css';
 
 type OwnProps = {
   name: string;

packages/fakta-opplaering/src/gjennomgaaOpplaering/GjennomgaaOpplaeringFerdigVisning.tsx

@@ -16,16 +16,17 @@ import {
 import React, { useContext } from 'react';
 import { useIntl } from 'react-intl';
 import DokumentLink from '../components/DokumentLink';
-import styles from './GjennomgaaOpplaeringFerdigVisning.modules.css';
+import styles from './GjennomgaaOpplaeringFerdigVisning.module.css';
 
 interface OwnProps {
   vurdering: GjennomgaaOpplaeringVurdering;
   rediger: () => void;
 }
 
 const GjennomgaaOpplaeringFerdigVisning = ({ vurdering, rediger }: OwnProps) => {
-  const { readOnly, opplaeringDokumenter, saksbehandlere } =
-    useContext<FaktaOpplaeringContextTypes>(FaktaOpplaeringContext);
+  const { readOnly, opplaeringDokumenter, saksbehandlere } = useContext<FaktaOpplaeringContextTypes>(
+    FaktaOpplaeringContext,
+  );
   const intl = useIntl();
 
   return (

packages/fakta-opplaering/src/gjennomgaaOpplaering/GjennomgaaOpplaeringNavigation.tsx

@@ -3,7 +3,7 @@ import { Heading } from '@navikt/ds-react';
 import { InteractiveList } from '@navikt/ft-plattform-komponenter';
 import React, { useEffect } from 'react';
 import PeriodeRad from '../components/PeriodeRad';
-import styles from './gjennomgaaOpplaeringNavigation.modules.css';
+import styles from './gjennomgaaOpplaeringNavigation.module.css';
 import GjennomgaaOpplaeringStatus from './konstanter';
 
 interface OwnProps {

packages/fakta-opplaering/src/noedvendighet/NoedvendighetFerdigVisning.tsx

@@ -14,7 +14,7 @@ import React, { useContext } from 'react';
 
 import { useIntl } from 'react-intl';
 import DokumentLink from '../components/DokumentLink';
-import styles from './noedvendighetFerdigVisning.modules.css';
+import styles from './noedvendighetFerdigVisning.module.css';
 
 interface OwnProps {
   vurdering: NoedvendighetVurdering;

packages/fakta-opplaering/src/noedvendighet/NoedvendighetNavigation.tsx

@@ -4,7 +4,7 @@ import { InteractiveList } from '@navikt/ft-plattform-komponenter';
 import React, { useEffect } from 'react';
 import PeriodeRad from '../components/PeriodeRad';
 import noedvendighetStatus from './konstanter';
-import styles from './noedvendighetNavigation.modules.css';
+import styles from './noedvendighetNavigation.module.css';
 
 interface OwnProps {
   perioder: NoedvendighetVurdering[];

packages/fakta-opplaering/src/reisetid/BeskrivelseFraSoeker.tsx

@@ -3,7 +3,7 @@ import { Box, LabelledContent, Margin } from '@navikt/ft-plattform-komponenter';
 import React from 'react';
 
 import { ReisetidVurdering } from './ReisetidTypes';
-import styles from './beskrivelseFraSoeker.modules.css';
+import styles from './beskrivelseFraSoeker.module.css';
 
 interface OwnProps {
   vurdering: ReisetidVurdering;

packages/fakta-opplaering/src/reisetid/PeriodeRad.tsx

@@ -7,7 +7,7 @@ import {
 } from '@navikt/ft-plattform-komponenter';
 import { Period } from '@navikt/k9-fe-period-utils';
 import React from 'react';
-import styles from './periodeRad.modules.css';
+import styles from './periodeRad.module.css';
 
 interface OwnProps {
   periode?: Period;

packages/fakta-opplaering/src/reisetid/ReisetidFerdigVisning.tsx

@@ -10,7 +10,7 @@ import { Vurderingsresultat } from '@k9-sak-web/types';
 import BeskrivelseFraSoeker from './BeskrivelseFraSoeker';
 import FraSoeknad from './FraSoeknad';
 import { ReisetidVurdering } from './ReisetidTypes';
-import styles from './reisetidFerdigVisning.modules.css';
+import styles from './reisetidFerdigVisning.module.css';
 
 interface OwnProps {
   vurdering: ReisetidVurdering;

packages/fakta-opplaering/src/reisetid/ReisetidNavigation.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 import PeriodeRad from './PeriodeRad';
 import { ReisetidVurdering } from './ReisetidTypes';
 import ReisetidStatus from './konstanter';
-import styles from './reisetidNavigation.modules.css';
+import styles from './reisetidNavigation.module.css';
 
 interface OwnProps {
   perioder: ReisetidVurdering[];

packages/fakta-verge/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fpsak-frontend/fakta-verge",
   "version": "1.0.0",
-  "module": "index.jsx",
+  "module": "index.ts",
   "license": "MIT",
   "private": true,
   "dependencies": {

packages/form/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@fpsak-frontend/form",
   "version": "1.0.0",
-  "module ": "index.js",
+  "main": "index.ts",
+  "module": "index.ts",
   "license": "MIT",
   "private": true,
   "dependencies": {

packages/form/src/radioGroupField.spec.jsx

@@ -9,7 +9,7 @@ import { messages } from '@fpsak-frontend/utils-test/src/intl-enzyme-test-helper
 import RadioGroupField from './RadioGroupField';
 import RadioOption from './RadioOption';
 
-const MockForm = reduxForm({ form: 'mock', onSubmit: jest.fn() })(({ handleSubmit, children }) => (
+const MockForm = reduxForm({ form: 'mock' })(({ handleSubmit, children }) => (
   <form onSubmit={handleSubmit}>{children}</form>
 ));
 const mountFieldInForm = (field, initialValues) =>

packages/modal-sett-pa-vent/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@k9-sak-web/modal-sett-pa-vent",
   "version": "1.0.0",
+  "main": "index.ts",
   "module": "index.ts",
   "license": "MIT",
   "private": true,