test: Fix test case errors.

Author: jaywcjlove

package.json

@@ -14,7 +14,7 @@
     "watch": "tsbb watch",
     "build": "tsbb build",
     "test": "tsbb test --env=jsdom",
-    "coverage": "tsbb test --coverage",
+    "coverage": "tsbb test --coverage --bail",
     "doc": "kkt build --app-src ./website",
     "start": "kkt start --app-src ./website",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,html,less,md,json}'"
@@ -73,31 +73,31 @@
     "@codemirror/lang-cpp": "0.19.1",
     "@codemirror/lang-html": "0.19.4",
     "@codemirror/lang-java": "0.19.1",
-    "@codemirror/lang-javascript": "0.19.3",
+    "@codemirror/lang-javascript": "0.19.4",
     "@codemirror/lang-json": "0.19.1",
     "@codemirror/lang-lezer": "0.19.1",
-    "@codemirror/lang-markdown": "0.19.3",
+    "@codemirror/lang-markdown": "0.19.4",
     "@codemirror/lang-php": "0.19.1",
     "@codemirror/lang-python": "0.19.2",
     "@codemirror/lang-rust": "0.19.1",
     "@codemirror/lang-sql": "0.19.4",
     "@codemirror/lang-xml": "0.19.2",
     "@codemirror/legacy-modes": "0.19.0",
     "@codemirror/stream-parser": "0.19.3",
-    "@kkt/less-modules": "7.0.4",
-    "@kkt/raw-modules": "7.0.4",
-    "@kkt/scope-plugin-options": "7.0.4",
+    "@kkt/less-modules": "7.0.5",
+    "@kkt/raw-modules": "7.0.5",
+    "@kkt/scope-plugin-options": "7.0.5",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/react-test-renderer": "17.0.1",
     "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.4.5",
+    "@uiw/react-markdown-preview": "3.4.7",
     "@uiw/react-shields": "1.1.2",
     "@uiw/reset.css": "1.0.5",
     "code-example": "3.3.1",
     "husky": "7.0.4",
-    "kkt": "7.0.4",
-    "lint-staged": "12.1.4",
+    "kkt": "7.0.5",
+    "lint-staged": "12.1.7",
     "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

src/index.tsx

@@ -70,7 +70,7 @@ export interface ReactCodeMirrorRef {
 const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
   const {
     className,
-    value,
+    value = '',
     selection,
     extensions = [],
     onChange,

src/react-app-env.d.ts

@@ -1,10 +1,12 @@
+/**
+ * @jest-environment jsdom
+ */
 /* eslint-disable jest/no-conditional-expect */
 import React, { useEffect, useRef } from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-// import '@testing-library/jest-dom';
+import { render, fireEvent, screen } from '@testing-library/react';
 // import userEvent from '@testing-library/user-event';
+// import '@testing-library/jest-dom';
 import CodeMirror, { ReactCodeMirrorRef } from '../src';
 
 it('CodeMirror', async () => {
@@ -21,12 +23,10 @@ it('CodeMirror onChange', async () => {
     expect(value).toEqual('# title');
     return Array.isArray(value) ? value.join() : value;
   });
-  const { findByRole, queryByText } = render(
-    <CodeMirror autoFocus value="console.log('Hello world!')" onChange={handleChange} />,
-  );
-  const input = await findByRole('textbox');
+  render(<CodeMirror autoFocus value="console.log('Hello world!')" onChange={handleChange} />);
+  const input = await screen.findByRole<HTMLInputElement>('textbox'); // findByRole('textbox');
   fireEvent.change(input, { target: { textContent: '# title' } });
-  const elm = queryByText('# title');
+  const elm = screen.queryByText('# title');
   expect((elm as any).cmView.dom.innerHTML).toEqual('# title');
 });
 
@@ -73,15 +73,15 @@ it('CodeMirror className', async () => {
 });
 
 it('CodeMirror placeholder', async () => {
-  const { findByText } = render(<CodeMirror placeholder="Hello World" className="test" />);
-  const text = await findByText('Hello World');
-  expect(text.className).toEqual('cm-placeholder');
-  expect(text.contentEditable).toEqual('false');
+  render(<CodeMirror placeholder="Hello World" className="test" />);
+  const elm = screen.queryByText('Hello World');
+  expect(elm!.style['pointerEvents']).toEqual('none');
+  expect(elm!.className).toEqual('cm-placeholder');
 });
 
 it('CodeMirror editable', async () => {
-  const { getByRole } = render(<CodeMirror editable={false} className="test" />);
-  const text = getByRole('textbox');
+  render(<CodeMirror editable={false} className="test" />);
+  const text = screen.getByRole('textbox');
   expect(text.className).toEqual('cm-content');
   expect(text.tagName).toEqual('DIV');
 });