Change project type to module and adapt test environment accordingly

Author: Luiz

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -1,2 +1,7 @@
-yarnPath: ".yarn/releases/yarn-berry.cjs"
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-berry.cjs

.yarnrc.yml

@@ -15,6 +15,7 @@
     "lit-element",
     "lit"
   ],
+  "type": "module",
   "main": "wc-context.js",
   "files": [
     "context-provider.js",
@@ -30,21 +31,14 @@
       "<rootDir>/dist/",
       "<rootDir>/examples/"
     ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(lit|@lit|lit-html|lit-element)/)"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/setup.js"
-    ],
     "testEnvironment": "jsdom"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.5",
     "@web/dev-server": "^0.1.28",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
-    "jest": "^27.4.5",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "lit": "^2.0.2",
     "lit-element": "^2",
     "prettier": "^2.5.1"
@@ -63,8 +57,6 @@
     "lint": "eslint lit-element.js lit.js wc-context.js core.js test",
     "start": "web-dev-server --open examples/ --node-resolve",
     "start:watch": "web-dev-server --open examples/ --node-resolve --watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:cover": "jest --coverage"
+    "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
   }
 }

babel.config.js

@@ -1,3 +1,4 @@
+import { jest } from '@jest/globals'
 import { registerContext, updateContext } from 'wc-context/core.js'
 import { ContextConsumer } from 'wc-context/controllers.js'
 import { LitElement } from 'lit'
@@ -7,10 +8,8 @@ const ComponentWithConsumer = class extends LitElement {}
 customElements.define('lit-controller-consumer', ComponentWithConsumer)
 
 describe('ContextConsumer', () => {
-  let rootEl
   let grandfatherEl
   let parentEl
-  let childEl
 
   beforeEach(() => {
     document.body.innerHTML = `
@@ -25,10 +24,8 @@ describe('ContextConsumer', () => {
         </div>       
       </div>
     `
-    rootEl = document.getElementById('root')
     grandfatherEl = document.getElementById('grandfather')
     parentEl = document.getElementById('parent')
-    childEl = document.getElementById('child')
   })
 
   it('should consume parent context when connected', () => {
@@ -52,7 +49,7 @@ describe('ContextConsumer', () => {
     registerContext(grandfatherEl, 'key', 'value')
     const component = new ComponentWithConsumer()
     const callback = jest.fn()
-    const ctxConsumer = new ContextConsumer(component, 'key', callback)
+    new ContextConsumer(component, 'key', callback)
     parentEl.appendChild(component)
     expect(callback).toHaveBeenCalledTimes(1)
     expect(callback).toHaveBeenCalledWith('value')
@@ -66,7 +63,7 @@ describe('ContextConsumer', () => {
   it('should call host requestUpdate when context changes and callback is ommited', async () => {
     registerContext(grandfatherEl, 'key', 'value')
     const component = new ComponentWithConsumer()
-    const ctxConsumer = new ContextConsumer(component, 'key')
+    new ContextConsumer(component, 'key')
     parentEl.appendChild(component)
     await component.updateComplete
     const updateFn = jest.spyOn(component, 'requestUpdate')

package.json

@@ -1,15 +1,14 @@
 /* eslint-env jest */
+import { jest } from '@jest/globals'
 import { registerContext, updateContext } from '../core'
 
 import '../context-consumer.js'
 
 describe('context-consumer', () => {
-  let rootEl
   let grandfatherEl
   let grandfather2El
   let parentEl
   let childEl
-  let child3El
 
   beforeEach(() => {
     document.body.innerHTML = `
@@ -29,12 +28,10 @@ describe('context-consumer', () => {
         </context-consumer>
       </div>
     `
-    rootEl = document.getElementById('root')
     grandfatherEl = document.getElementById('grandfather')
     grandfather2El = document.getElementById('grandfather2')
     parentEl = document.getElementById('parent')
     childEl = document.getElementById('child')
-    child3El = document.getElementById('child3')
   })
 
   describe('when is a child of a context provider', () => {

test/consumer.spec.js

@@ -1,4 +1,5 @@
 /* eslint-env jest */
+import { jest } from '@jest/globals'
 import {
   registerContext,
   observeContext,

test/context-consumer.spec.js

@@ -1,4 +1,5 @@
 /* eslint-env jest */
+import { jest } from '@jest/globals'
 import {
   registerContext,
   observeContext,

test/context-provider.spec.js

@@ -1,3 +1,4 @@
+import { jest } from '@jest/globals'
 import { observeContext } from 'wc-context/core.js'
 import { ContextProvider } from 'wc-context/controllers.js'
 import { LitElement } from 'lit'