Merge pull request #227 from cozy/feat/remove-enzyme

Remove enzyme

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   moduleFileExtensions: ['js', 'jsx', 'json'],
-  setupFilesAfterEnv: ['<rootDir>/enzyme.setup.js', '<rootDir>jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>jest.setup.js'],
   testPathIgnorePatterns: ['@bitwarden/jslib', 'transpiled/'],
   transformIgnorePatterns: ['node_modules/(?!(cozy-ui))'],
   watchPathIgnorePatterns: ['node_modules'],

package.json

@@ -43,7 +43,7 @@
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "5.3.5",
     "@testing-library/react": "11.2.7",
-    "@testing-library/react-hooks": "3.7.0",
+    "@testing-library/react-hooks": "8.0.1",
     "babel-loader": "8.2.4",
     "babel-plugin-inline-react-svg": "1.1.2",
     "babel-plugin-mock-imports": "1.2.0",
@@ -53,13 +53,11 @@
     "cozy-flags": "2.8.6",
     "cozy-intent": "2.13.1",
     "cozy-ui": "93.1.1",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "enzyme-to-json": "3.4.0",
     "eslint-config-cozy-app": "1.6.0",
     "jest": "26.2.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-test-renderer": "16.14.0",
     "semantic-release": "^15.13.24"
   },
   "files": [

src/components/VaultContext.spec.jsx

@@ -1,71 +1,84 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { EventEmitter } from 'events'
 import {
   VaultContext,
   VaultProvider,
   withVaultClient,
   useVaultClient
 } from './VaultContext'
 import WebVaultClient from '../WebVaultClient'
+import { render, waitFor } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
 
 jest.mock('../WebVaultClient')
 
+const createFakeVaultClient = () => {
+  const vaultClient = new EventEmitter()
+
+  vaultClient.on('lock', () => {
+    vaultClient.locked = true
+  })
+  vaultClient.on('unlock', () => {
+    vaultClient.locked = false
+  })
+  vaultClient.isLocked = () => vaultClient.locked
+
+  return vaultClient
+}
+
 describe('VaultProvider', () => {
   it('should rerender when the locked state changes', async () => {
-    const ChildComponent = jest.fn()
+    const ChildComponent = jest.fn(() => null)
+    const vaultClient = createFakeVaultClient()
 
-    const component = mount(
-      <VaultProvider instance={'[email protected]'}>
+    render(
+      <VaultProvider vaultClient={vaultClient} instance={'[email protected]'}>
         <VaultContext.Consumer>{ChildComponent}</VaultContext.Consumer>
       </VaultProvider>
     )
 
-    const vaultClient = component.state('vaultClient')
+    expect(ChildComponent).toHaveBeenCalledWith({
+      vaultClient,
+      locked: true
+    })
 
-    expect(ChildComponent).toHaveBeenCalledWith({ vaultClient, locked: true })
+    vaultClient.emit('unlock')
 
-    vaultClient.unlock()
-
-    await new Promise(resolve =>
-      setTimeout(() => {
-        expect(ChildComponent).toHaveBeenCalledTimes(3)
-        expect(ChildComponent).toHaveBeenCalledWith({
-          vaultClient,
-          locked: false
-        })
-        resolve()
+    await waitFor(() => {
+      expect(ChildComponent).toHaveBeenCalledWith({
+        vaultClient,
+        locked: false
       })
-    )
+    })
 
-    vaultClient.lock()
+    vaultClient.emit('lock')
 
-    await new Promise(resolve =>
-      setTimeout(() => {
-        expect(ChildComponent).toHaveBeenCalledTimes(4)
-        expect(ChildComponent).toHaveBeenCalledWith({
-          vaultClient,
-          locked: true
-        })
-        resolve()
+    await waitFor(() => {
+      expect(ChildComponent).toHaveBeenCalledWith({
+        vaultClient,
+        locked: true
       })
-    )
+    })
   })
 })
 
 describe('withVaultClient', () => {
-  it('should inject vaultClient as a prop', () => {
-    const ChildComponent = () => <div />
+  it('should inject vaultClient as a prop', async () => {
+    const ChildComponent = jest.fn(() => null)
+
     const ChildWithClient = withVaultClient(ChildComponent)
 
-    const component = mount(
+    render(
       <VaultProvider instance={'[email protected]'}>
         <ChildWithClient />
       </VaultProvider>
     )
 
-    const child = component.find(ChildComponent)
-    expect(child.prop('vaultClient')).toBeDefined()
+    // Check if the vault is correctly injected as a prop
+    const propsPassedToChildComponent = Object.keys(
+      ChildComponent.mock.calls[0][0]
+    )
+    expect(propsPassedToChildComponent).toContain('vaultClient')
   })
 })