Remove enzyme

.github/workflows/deploy.yml

@@ -47,10 +47,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup_modules
       - uses: ./.github/actions/build_cache_read
-      - name: Tests without snapshots
-        run: yarn test:noSnapshots
-      - name: Tests snapshots
-        run: yarn test:snapshots
+      - name: Tests
+        run: yarn test
       - name: BundleMon
         uses: lironer/bundlemon-action@v1
   argosDesktop:

jest.config.js

@@ -21,6 +21,5 @@ module.exports = {
   globals: {
     __ALLOW_HTTP__: false,
     cozy: {}
-  },
-  snapshotSerializers: ['enzyme-to-json/serializer']
+  }
 }

package.json

@@ -48,8 +48,6 @@
     "sprite": "scripts/make-icon-sprite.sh",
     "screenshots": "node scripts/screenshots.js --screenshot-dir ./screenshots --styleguide-url file://$(pwd)/build/react --kss-dir ./build/styleguide",
     "test": "jest",
-    "test:noSnapshots": "jest --testPathIgnorePatterns 'react/examples.spec.jsx'",
-    "test:snapshots": "jest react/examples.spec.jsx",
     "screenshots:server": "nodemon ./scripts/pixelmatch-server/server.js -e js,hbs",
     "postbuild": "postcss transpiled/react/stylesheet.css --replace",
     "travis-deploy-once": "travis-deploy-once",
@@ -103,9 +101,6 @@
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.8",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "3.6.2",
     "eslint": "8.11.0",
     "eslint-config-cozy-app": "^6.1.0",
     "eslint-config-prettier": "8.6.0",
@@ -134,7 +129,6 @@
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
     "prettier": "2.6.0",
-    "pretty": "2.0.0",
     "prop-types": "15.7.2",
     "react": "16.12.0",
     "react-dom": "16.12.0",

react/AppIcon/test/AppIcon.spec.js

@@ -1,10 +1,17 @@
 'use strict'
 /* eslint-env jest */
 
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { AppIcon } from '..'
+import Icon from '../../Icon'
+
+jest.mock('../../Icon', () => ({
+  ...jest.requireActual('../../Icon'),
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="icon-component"></div>)
+}))
 
 describe('AppIcon component', () => {
   const app = {}
@@ -20,6 +27,7 @@ describe('AppIcon component', () => {
 
   beforeEach(() => {
     jest.resetModules()
+    jest.clearAllMocks()
 
     successFetchIcon = jest
       .fn()
@@ -33,17 +41,18 @@ describe('AppIcon component', () => {
   })
 
   it(`renders as loading`, () => {
-    const wrapper = shallow(
+    render(
       <AppIcon app={app} fetchIcon={successFetchIcon} client={mockClient} />
     )
 
-    const component = wrapper.getElement()
-    expect(component).toMatchSnapshot()
+    const loadingElement = screen.getByRole('progressbar')
+
+    expect(loadingElement).toBeInTheDocument()
     expect(successFetchIcon).toHaveBeenCalledWith(app, domain, secure)
     expect(console.error).not.toHaveBeenCalled()
   })
 
-  it(`should provide appData to getIconUrl in order to get icon simply, when oauth not needed`, async done => {
+  it(`should provide appData to getIconUrl in order to get icon simply, when oauth not needed`, async () => {
     const app = {
       name: 'app name',
       slug: 'slug',
@@ -63,92 +72,71 @@ describe('AppIcon component', () => {
         getIconURL: getIconURLMock
       })
     }
-    const wrapper = shallow(
-      <AppIcon
-        app={app}
-        client={mockClient}
-        onReady={() => {
-          wrapper.update()
-          expect(getIconURLMock).toHaveBeenNthCalledWith(1, {
-            appData: app,
-            priority: 'stack',
-            slug: 'slug',
-            type: 'app'
-          })
-          done()
-        }}
-      />
-    )
+
+    render(<AppIcon app={app} client={mockClient} />)
+
+    expect(getIconURLMock).toHaveBeenNthCalledWith(1, {
+      appData: app,
+      priority: 'stack',
+      slug: 'slug',
+      type: 'app'
+    })
   })
 
-  it(`renders correctly`, async done => {
-    const wrapper = shallow(
-      <AppIcon
-        app={app}
-        fetchIcon={successFetchIcon}
-        client={mockClient}
-        onReady={() => {
-          wrapper.update()
-          const component = wrapper.getElement()
-          expect(component).toMatchSnapshot()
-          expect(successFetchIcon).toHaveBeenCalledWith(app, domain, secure)
-          expect(console.error).not.toHaveBeenCalled()
-          done()
-        }}
-      />
+  it(`renders correctly`, async () => {
+    render(
+      <AppIcon app={app} fetchIcon={successFetchIcon} client={mockClient} />
     )
+
+    const iconElement = await screen.findByRole('img')
+    expect(iconElement).toBeInTheDocument()
+
+    expect(successFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
   })
 
-  it(`renders default when fetch error occurs`, async done => {
-    const wrapper = shallow(
-      <AppIcon
-        app={app}
-        fetchIcon={failureFetchIcon}
-        client={mockClient}
-        onReady={() => {
-          wrapper.update()
-          const component = wrapper.getElement()
-          expect(component).toMatchSnapshot()
-          expect(failureFetchIcon).toHaveBeenCalledWith(app, domain, secure)
-          expect(console.error).not.toHaveBeenCalled()
-          done()
-        }}
-      />
+  it(`renders default when fetch error occurs`, async () => {
+    render(
+      <AppIcon app={app} fetchIcon={failureFetchIcon} client={mockClient} />
+    )
+
+    const iconFallbackElement = await screen.findByTestId('icon-component')
+    expect(iconFallbackElement).toBeInTheDocument()
+
+    expect(failureFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
+
+    // Check that the Icon component has been called with a function (CubeIcon function is the default icon)
+    expect(Icon).toHaveBeenCalledWith(
+      expect.objectContaining({
+        icon: expect.any(Function)
+      }),
+      {}
     )
   })
 
-  it(`renders provided fallbackIcon when fetch error occurs`, async done => {
-    const wrapper = shallow(
+  it(`renders provided fallbackIcon when fetch error occurs`, async () => {
+    render(
       <AppIcon
         app={app}
         fetchIcon={failureFetchIcon}
         client={mockClient}
-        onReady={() => {
-          wrapper.update()
-          const component = wrapper.getElement()
-          expect(component).toMatchSnapshot()
-          expect(failureFetchIcon).toHaveBeenCalledWith(app, domain, secure)
-          expect(console.error).not.toHaveBeenCalled()
-          done()
-        }}
         fallbackIcon="warning"
       />
     )
-  })
 
-  it(`renders provided fallbackIcon on img error`, async done => {
-    const wrapper = shallow(
-      <AppIcon
-        fetchIcon={() => 'notagoodurl'}
-        onReady={() => {
-          wrapper.simulate('error')
-          wrapper.update()
-          const component = wrapper.getElement()
-          expect(component).toMatchSnapshot()
-          done()
-        }}
-        fallbackIcon="warning"
-      />
+    const iconFallbackElement = await screen.findByTestId('icon-component')
+    expect(iconFallbackElement).toBeInTheDocument()
+
+    expect(failureFetchIcon).toHaveBeenCalledWith(app, domain, secure)
+    expect(console.error).not.toHaveBeenCalled()
+
+    // Check that the Icon component has been called with "warning"
+    expect(Icon).toHaveBeenCalledWith(
+      expect.objectContaining({
+        icon: 'warning'
+      }),
+      {}
     )
   })
 })