test(react): restore Jest and add jest-axe accessibility tests

.github/workflows/build-and-lint.yml

@@ -42,5 +42,8 @@ jobs:
       - name: Lint check
         run: yarn lint
 
+      - name: Unit tests
+        run: yarn workspace @embeddedchat/react test
+
       - name: Build
         run: yarn build && yarn build:storybook

packages/react/__mocks__/swiper.js

@@ -0,0 +1 @@
+module.exports = { register: () => {} };

packages/react/babel.config.js

@@ -3,7 +3,7 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        modules: false,
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
         bugfixes: true,
         targets: { browsers: '> 0.25%, ie 11, not op_mini all, not dead' },
       },

packages/react/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '\\.(css|scss)$': 'identity-obj-proxy',
+    '^react-syntax-highlighter/dist/esm/(.*)$':
+      'react-syntax-highlighter/dist/cjs/$1',
+    '^swiper/(.*)$': '<rootDir>/__mocks__/swiper.js',
+  },
+};

packages/react/jest.setup.js

@@ -0,0 +1,24 @@
+import { TextEncoder, TextDecoder } from 'util';
+import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
+
+// jsdom does not expose these globals, which react-dom/server needs.
+// MessageChannel is stubbed because Node's real one keeps Jest open.
+class MessageChannelStub {
+  constructor() {
+    this.port1 = { onmessage: null, postMessage: () => {}, close: () => {} };
+    this.port2 = {
+      postMessage: (data) =>
+        setTimeout(() => this.port1.onmessage?.({ data }), 0),
+      close: () => {},
+    };
+  }
+}
+
+Object.assign(global, {
+  TextEncoder,
+  TextDecoder,
+  MessageChannel: MessageChannelStub,
+});
+
+expect.extend(toHaveNoViolations);

packages/react/package.json

@@ -15,6 +15,7 @@
     "prebuild": "rimraf dist",
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 rollup -c --context=window --environment NODE_ENV:production",
     "watch": "cross-env NODE_OPTIONS=--max-old-space-size=4096 rollup -c --watch --context=window",
+    "test": "jest",
     "test:lint": "eslint src/**/*.js",
     "format": "prettier --write 'src/' ",
     "format:check": "prettier --check 'src/' ",
@@ -46,8 +47,10 @@
     "@storybook/react": "^8.6.18",
     "@storybook/react-webpack5": "^8.6.18",
     "@storybook/test": "^8.6.18",
-    "@testing-library/react": "^12.1.4",
-    "babel-jest": "^27.5.1",
+    "@testing-library/dom": "^10",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^16",
+    "babel-jest": "^29",
     "concurrently": "^7.2.0",
     "cross-env": "^7.0.3",
     "deepmerge": "^4.3.1",
@@ -62,7 +65,9 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
+    "jest": "^29",
+    "jest-axe": "^10",
+    "jest-environment-jsdom": "^29",
     "lint-staged": "^12.4.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.1",

packages/react/src/index.test.js

@@ -1,16 +1,7 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { EmbeddedChat } from './index';
 
-import { RCComponent } from './index';
-
-describe('Rendering of RCComponent Component', () => {
-  test('renders the RCComponent component', () => {
-    render(<RCComponent />);
-  });
-
-  test('if isClosable = true, and setClosableState is not provided.. throw an error', () => {
-    expect(() => {
-      render(<RCComponent isClosable />);
-    }).toThrowError();
+describe('package entry', () => {
+  test('exports the EmbeddedChat component', () => {
+    expect(EmbeddedChat).toBeDefined();
   });
 });

packages/react/src/views/TypingUsers/TypingUsers.a11y.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeProvider } from '@embeddedchat/ui-elements';
+import { RCInstanceProvider } from '../../context/RCInstance';
+import TypingUsers from './TypingUsers';
+
+const renderTypingUsers = (props) => {
+  let typingListener;
+  const RCInstance = {
+    addTypingStatusListener: (listener) => {
+      typingListener = listener;
+    },
+    removeTypingStatusListener: jest.fn(),
+  };
+
+  const result = render(
+    <ThemeProvider>
+      <RCInstanceProvider value={{ RCInstance }}>
+        <TypingUsers {...props} />
+      </RCInstanceProvider>
+    </ThemeProvider>
+  );
+
+  return { ...result, setTyping: (users) => act(() => typingListener(users)) };
+};
+
+describe('TypingUsers accessibility', () => {
+  test('has no violations when nobody is typing', async () => {
+    const { container } = renderTypingUsers();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  test('has no violations while users are typing', async () => {
+    const { container, setTyping } = renderTypingUsers();
+    setTyping(['alice', 'bob']);
+    expect(container).toHaveTextContent('alice and bob are typing...');
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});