Stop using Enzyme (#151)

* Stop doing snapshot testing * Stop using shallow * A lot better * Scrap Enzyme * Eliminate e2e class names * The last testing fixes? * Removals
qntm · Aug 21, 2022 · eac0d9f · eac0d9f
1 parent c960c4f
commit eac0d9f
Show file tree

Hide file tree

Showing 17 changed files with 1,031 additions and 4,447 deletions.
diff --git a/.dotfile b/.dotfile
diff --git a/babel.config.json b/babel.config.json
@@ -1,3 +1,11 @@
 {
-	"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
 }
diff --git a/config/jestSetup.js → config/jestSetup.ts b/config/jestSetup.js → config/jestSetup.ts
@@ -1,7 +1,4 @@
-const Enzyme = require('enzyme')
-const EnzymeAdapterReact16 = require('enzyme-adapter-react-16')
-
-Enzyme.configure({ adapter: new EnzymeAdapterReact16() })
+import '@testing-library/jest-dom'
 
 // Need for clipboard testing
 navigator.clipboard = {

diff --git a/cypress/e2e/play.cy.js b/cypress/e2e/play.cy.js
@@ -6,14 +6,14 @@ describe('HATETRIS', () => {
     cy.contains('you\'re playing HATETRIS by qntm')
 
     cy.get('button').contains('start new game').click()
-    cy.get('.e2e__score').contains('0')
+    cy.get('[data-testid="score"]').contains('0')
 
     for (let i = 0; i < 90; i++) {
       cy.get('body').trigger('keydown', { key: 'Down' })
     }
 
-    cy.get('.e2e__score').contains('0')
-    cy.get('.e2e__replay-out').contains('௨ටໃݹ௨ටໃݹठ')
+    cy.get('[data-testid="score"]').contains('0')
+    cy.get('[data-testid="replay-out"]').contains('௨ටໃݹ௨ටໃݹठ')
   })
 
   it('plays an easy game', () => {
@@ -23,30 +23,30 @@ describe('HATETRIS', () => {
     cy.get('button').contains('select AI').click()
     cy.get('button').contains('all 4x1 pieces').click()
     cy.get('button').contains('start new game').click()
-    cy.get('.e2e__score').contains('0')
+    cy.get('[data-testid="score"]').contains('0')
 
     for (let i = -5; i <= 4; i++) {
       // Rotate until vertical
-      cy.get('.e2e__up').click()
+      cy.get('button').contains('⟳').click()
 
       // Move to correct column
       if (i < 0) {
         for (let j = 0; j > i; j--) {
-          cy.get('.e2e__left').click()
+          cy.get('button').contains('←').click()
         }
       } else {
         for (let j = 0; j < i; j++) {
-          cy.get('.e2e__right').click()
+          cy.get('button').contains('→').click()
         }
       }
 
       // Drop
       for (let j = 0; j < 17; j++) {
-        cy.get('.e2e__down').click()
+        cy.get('button').contains('↓').click()
       }
     }
 
-    cy.get('.e2e__score').contains('4')
+    cy.get('[data-testid="score"]').contains('4')
     // no replay
   })
 
@@ -63,21 +63,21 @@ describe('HATETRIS', () => {
       // Move to correct column
       if (i < 0) {
         for (let j = 0; j > i; j--) {
-          cy.get('.e2e__left').click()
+          cy.get('button').contains('←').click()
         }
       } else {
         for (let j = 0; j < i; j++) {
-          cy.get('.e2e__right').click()
+          cy.get('button').contains('→').click()
         }
       }
 
       // Drop
       for (let j = 0; j < 18; j++) {
-        cy.get('.e2e__down').click()
+        cy.get('button').contains('↓').click()
       }
     }
 
-    cy.get('.e2e__score').contains('2')
+    cy.get('[data-testid="score"]').contains('2')
   })
 
   it('plays a Base2048 replay', () => {
@@ -92,9 +92,9 @@ describe('HATETRIS', () => {
     cy.get('button').contains('show a replay').click()
 
     for (let score = 0; score <= 11; score++) {
-      cy.get('.e2e__score').contains(String(score), { timeout: 20000 })
+      cy.get('[data-testid="score"]').contains(String(score), { timeout: 20000 })
     }
 
-    cy.get('.e2e__replay-out').contains(replay)
+    cy.get('[data-testid="replay-out"]').contains(replay)
   })
 })
diff --git a/jest.config.js b/jest.config.js
@@ -1,9 +1,6 @@
 module.exports = {
   collectCoverage: true,
-  setupFilesAfterEnv: ['<rootDir>/config/jestSetup.js'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer'
-  ],
+  setupFilesAfterEnv: ['<rootDir>/config/jestSetup.ts'],
   moduleNameMapper: {
     '\\.css$': '<rootDir>/__mocks__/styleMock.js'
   },