equinor · oddvernes · Aug 16, 2023 · Aug 16, 2023 · Aug 16, 2023 · Aug 16, 2023
@@ -130,6 +130,12 @@ module.exports = {
             checksVoidReturn: false,
           },
         ],
+        'testing-library/no-await-sync-events': [
+          'error',
+          {
+            eventModules: ['fire-event'],
+          },
+        ],
       },
     },
     // Testing linting

@@ -13,7 +13,7 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "prettier.prettierPath": "./node_modules/prettier",
+  "prettier.prettierPath": "",
   "typescript.tsdk": "node_modules/typescript/lib",
   "task.allowAutomaticTasks": "off",
   "[bicep]": {

@@ -51,18 +51,18 @@
     "@babel/preset-typescript": "^7.22.5",
     "@babel/runtime": "^7.22.5",
     "@types/jest-axe": "^3.5.5",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.11.0",
+    "eslint-plugin-testing-library": "^6.0.0",
     "jest-axe": "^7.0.1",
     "prettier": "3.0.2",
     "typescript": "^4.9.4"

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import { render, cleanup, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -18,7 +18,6 @@ beforeEach(() => {
 
 afterEach(() => {
   jest.spyOn(Math, 'random').mockRestore()
-  cleanup
 })
 
 type TestProps = {

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import {
   render,
-  cleanup,
   fireEvent,
   screen,
   within,
@@ -17,7 +16,6 @@ const itemObjects = [{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]
 const items = ['One', 'Two', 'Three']
 const labelText = 'Select label test'
 
-afterEach(cleanup)
 const mockResizeObserver = jest.fn(() => ({
   observe: jest.fn(),
   disconnect: jest.fn(),

@@ -364,6 +364,7 @@ function AutocompleteInner<T>(
         return item
       }
       try {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
         return item?.toString()
       } catch (error) {
         throw new Error(

@@ -50,7 +50,7 @@ const Label = styled.span<{ multiline: boolean }>(({ theme, multiline }) => {
   `
 })
 
-export type AutocompleteOptionProps<T> = {
+export type AutocompleteOptionProps = {
   value: string
   multiple: boolean
   highlighted: string
@@ -60,8 +60,8 @@ export type AutocompleteOptionProps<T> = {
   optionComponent?: ReactNode
 } & LiHTMLAttributes<HTMLLIElement>
 
-function AutocompleteOptionInner<T>(
-  props: AutocompleteOptionProps<T>,
+function AutocompleteOptionInner(
+  props: AutocompleteOptionProps,
   ref: React.ForwardedRef<HTMLLIElement>,
 ) {
   const {
@@ -109,8 +109,8 @@ function AutocompleteOptionInner<T>(
   )
 }
 
-export const AutocompleteOption = forwardRef(AutocompleteOptionInner) as <T>(
-  props: AutocompleteOptionProps<T> & {
+export const AutocompleteOption = forwardRef(AutocompleteOptionInner) as (
+  props: AutocompleteOptionProps & {
     ref?: React.ForwardedRef<HTMLLIElement>
     displayName?: string | undefined
   },

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -11,8 +11,6 @@ const StyledAvatar = styled(Avatar)`
   position: relative;
 `
 
-afterEach(cleanup)
-
 describe('Avatar', () => {
   it('Matches snapshot', () => {
     const src = 'https://i.imgur.com/UM3mrju.jpg'

@@ -16,11 +16,10 @@ const StyledAvatar = styled.div<StyledAvatarProps>`
   flex-shrink: 0;
   overflow: hidden;
   ${bordersTemplate(tokens.border)};
-  ${({ size }) =>
-    css`
-      height: ${size}px;
-      width: ${size}px;
-    `}
+  ${({ size }) => css`
+    height: ${size}px;
+    width: ${size}px;
+  `}
 `
 
 type StyledImageProps = {

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -19,8 +19,6 @@ const StyledBanner = styled(Banner)`
 
 const rgbaTrim = (x: string) => x.split(' ').join('')
 
-afterEach(cleanup)
-
 describe('Banner', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, fireEvent, act, screen } from '@testing-library/react'
+import { render, fireEvent, act, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -12,8 +12,6 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
   position: absolute;
 `
 
-afterEach(cleanup)
-
 describe('Breadcrumbs', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -27,8 +27,6 @@ const LinkButton = ({ to }: { to: string }) => {
   )
 }
 
-afterEach(cleanup)
-
 describe('Button', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(<Button>Button</Button>)

@@ -1,4 +1,4 @@
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -42,8 +42,6 @@ const StyledActions = styled(Actions)`
   width: 100px;
 `
 
-afterEach(cleanup)
-
 describe('Card', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 
 import { useState } from 'react'
-import { render, cleanup, fireEvent, screen } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -10,8 +10,6 @@ import styled from 'styled-components'
 
 import { Checkbox } from './Checkbox'
 
-afterEach(cleanup)
-
 const StyledCheckbox = styled(Checkbox)`
   clip-path: unset;
 `

@@ -1,4 +1,4 @@
-import { render, cleanup, fireEvent, screen } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { axe } from 'jest-axe'
 import 'jest-styled-components'
@@ -17,8 +17,6 @@ const { enabled, error } = tokens
 
 const rgbaTrim = (x: string) => x.split(' ').join('')
 
-afterEach(cleanup)
-
 describe('Chips', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import { useState } from 'react'
-import { render, cleanup, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -23,8 +23,6 @@ beforeAll(() => {
   HTMLDialogElement.prototype.close = jest.fn()
 })
 
-afterEach(cleanup)
-
 const DismissableDialog = (props) => {
   const [isOpen, setIsOpen] = useState(true)
 

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { axe } from 'jest-axe'
 import 'jest-styled-components'
@@ -25,8 +25,6 @@ const {
   },
 } = tokens
 
-afterEach(cleanup)
-
 describe('Divider', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(<Divider />)

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
@@ -15,8 +15,6 @@ const StyledIcon = styled(Icon)`
   width: 100px;
 `
 
-afterEach(cleanup)
-
 describe('Icon', () => {
   it('Matches snapshot using data', () => {
     const { asFragment } = render(<Icon data={save} />)

@@ -4,7 +4,7 @@ import { add } from './library'
 
 export type IconBasket = { icon?: IconData; count: number }
 
-export type Name = IconName | string
+export type Name = IconName
 
 export type IconType = typeof Icon & {
   add: typeof add

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import 'jest-styled-components'
 import '@testing-library/jest-dom'
 import { axe } from 'jest-axe'
@@ -8,8 +8,6 @@ import { Input } from './Input'
 import * as tokens from './Input.tokens'
 import { trimSpaces } from '@equinor/eds-utils'
 
-afterEach(cleanup)
-
 describe('Input', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(<Input value="input value" readOnly />)

@@ -18,13 +18,15 @@ const Label = styled(_Label)`
   margin-left: 8px;
   margin-right: 8px;
 `
-
+/* @TODO fix no-unused-prop-types disabled & readOnly */
 export type InputWrapperProps = {
   /** Label */
   label?: string
   /** Disabled state */
+  // eslint-disable-next-line react/no-unused-prop-types
   disabled?: boolean
   /** Read Only */
+  // eslint-disable-next-line react/no-unused-prop-types
   readOnly?: boolean
   /** Highlight color */
   color?: Variants

@@ -1,12 +1,10 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
 import styled from 'styled-components'
 import { Label } from './Label'
 
-afterEach(cleanup)
-
 describe('Label', () => {
   it('Matches snapshot', () => {
     const { asFragment } = render(<Label label="label" />)

@@ -30,19 +30,18 @@ export type LabelProps = {
   disabled?: boolean
 } & LabelHTMLAttributes<HTMLLabelElement>
 
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
-  props,
-  ref,
-) {
-  const { label = '', meta, disabled = false, ...other } = props
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  function Label(props, ref) {
+    const { label = '', meta, disabled = false, ...other } = props
 
-  return (
-    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
-    <LabelBase ref={ref} disabledText={disabled} {...other}>
-      <Text>{label}</Text>
-      {meta && <Text>{meta}</Text>}
-    </LabelBase>
-  )
-})
+    return (
+      /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
+      <LabelBase ref={ref} disabledText={disabled} {...other}>
+        <Text>{label}</Text>
+        {meta && <Text>{meta}</Text>}
+      </LabelBase>
+    )
+  },
+)
 
 // Label.displayName = 'eds-text-field-label'
@@ -1,13 +1,11 @@
 /* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import 'jest-styled-components'
 import { axe } from 'jest-axe'
 import styled from 'styled-components'
 import { List } from '.'
 
-afterEach(cleanup)
-
 const StyledList = styled(List)`
   margin-left: 0;
 `