feat(react): update to react 18 and testing-library (#138)

packages/bbob-react/package.json

@@ -15,15 +15,14 @@
   },
   "peerDependencies": {
     "prop-types": "15.x",
-    "react": "15.x"
+    "react": "18.x"
   },
   "devDependencies": {
     "@bbob/preset-react": "^2.8.0",
-    "enzyme": "^3.9.0",
+    "@testing-library/jest-dom": "^5.16.4",
-    "enzyme-adapter-react-15": "^1.0.6",
+    "@testing-library/react": "13.x",
-    "react": "15.x",
+    "react": "18.x",
-    "react-dom": "^15.6.2",
+    "react-dom": "18.x"
-    "react-test-renderer": "^15.6.2"
   },
   "main": "lib/index.js",
   "module": "es/index.js",

packages/bbob-react/test/index.test.js

@@ -1,39 +1,42 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react';
 import preset from '@bbob/preset-react';
+import '@testing-library/jest-dom'
 
-import Enzyme, { shallow } from 'enzyme';
+import { render } from '@testing-library/react'
-import Adapter from 'enzyme-adapter-react-15';
 
 import BBCode from '../src';
-Enzyme.configure({ adapter: new Adapter() });
 
-const renderBBCode = (input, options) => shallow(
+const renderBBCode = (input, options) => render(
     <BBCode plugins={[preset()]} options={options}>{input}</BBCode>
-).html();
+).container.innerHTML;
 
 describe('@bbob/react', () => {
   test('[b]bolded text[/b]', () => {
     const html = renderBBCode('[b]bolded text[/b]');
 
-    expect(html).toBe('<span><span style="font-weight:bold;">bolded text</span></span>')
+    expect(html).toBe('<span><span style="font-weight: bold;">bolded text</span></span>')
   });
 
   test('[i]italicized text[/i]', () => {
     const html = renderBBCode('[i]italicized text[/i]');
 
-    expect(html).toBe('<span><span style="font-style:italic;">italicized text</span></span>')
+    expect(html).toBe('<span><span style="font-style: italic;">italicized text</span></span>')
   });
 
   test('[u]underlined text[/u]', () => {
     const html = renderBBCode('[u]underlined text[/u]');
 
-    expect(html).toBe('<span><span style="text-decoration:underline;">underlined text</span></span>')
+    expect(html).toBe('<span><span style="text-decoration: underline;">underlined text</span></span>')
   });
 
   test('[s]strikethrough text[/s]', () => {
     const html = renderBBCode('[s]strikethrough text[/s]');
 
-    expect(html).toBe('<span><span style="text-decoration:line-through;">strikethrough text</span></span>')
+    expect(html).toBe('<span><span style="text-decoration: line-through;">strikethrough text</span></span>')
   });
 
   test('[url]https://en.wikipedia.org[/url]', () => {
@@ -45,14 +48,14 @@ describe('@bbob/react', () => {
   test('[b]Testing[/b][hr]', () => {
     const html = renderBBCode('[b]Testing[/b][hr]');
 
-    expect(html).toBe('<span><span style="font-weight:bold;">Testing</span><hr/></span>')
+    expect(html).toBe('<span><span style="font-weight: bold;">Testing</span><hr></span>')
   });
 
   describe('options.onlyAllowTags', () => {
     test('render "[Super Feature] and [i]super[/i]" when only [i] allowed', () => {
       const html = renderBBCode('[Super Feature] and [i]super[/i]', { onlyAllowTags: ['i'] });
 
-      expect(html).toBe('<span>[Super Feature] and <span style="font-style:italic;">super</span></span>')
+      expect(html).toBe('<span>[Super Feature] and <span style="font-style: italic;">super</span></span>')
     });
   });