Convert tests to RTL

__tests__/MiradorImageTools.test.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from './test-utils';
 import { TestableImageTools as MiradorImageTools } from '../src/plugins/MiradorImageTools';
-import ImageTool from '../src/plugins/ImageTool';
-import ImageRotation from '../src/plugins/ImageRotation';
-import ImageFlip from '../src/plugins/ImageFlip';
 
 const mockPalette = {
   palette: {
@@ -22,24 +19,31 @@ function createWrapper(props) {
       windowId="x"
       width="sm"
       theme={mockPalette}
-      t={() => {}}
+      t={(k) => k}
       {...props}
     />,
   );
 }
 
 describe('MiradorImageTools', () => {
-  let wrapper;
-  it('renders ImageTools', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(ImageTool).length).toBe(5);
+  it('renders buttons', async () => {
+    createWrapper();
+
+    expect(screen.getByRole('button', { name: 'brightness' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'contrast' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'saturation' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'greyscale' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'invert' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'revert' })).toBeInTheDocument();
   });
   it('renders ImageRotation', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(ImageRotation).length).toBe(2);
+    createWrapper();
+
+    expect(screen.getByRole('button', { name: 'rotateLeft' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'rotateRight' })).toBeInTheDocument();
   });
   it('renders ImageFlip', () => {
-    wrapper = createWrapper();
-    expect(wrapper.find(ImageFlip).length).toBe(1);
+    createWrapper();
+    expect(screen.getByRole('button', { name: 'flip' })).toBeInTheDocument();
   });
 });

__tests__/test-utils.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { createStore, applyMiddleware } from 'redux';
+import { thunk } from 'redux-thunk';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import createRootReducer from 'mirador/dist/es/src/state/reducers/rootReducer';
+import settings from 'mirador/dist/es/src/config/settings';
+
+const rootReducer = createRootReducer();
+const theme = createTheme(settings.theme);
+
+/**
+ * Hook up our rendered object to redux
+ */
+function renderWithProviders(
+  ui,
+  {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)),
+    ...renderOptions
+  } = {},
+) {
+  /** :nodoc: */
+  function Wrapper({ children }) {
+    return (
+      <ThemeProvider theme={theme}>
+        <Provider store={store}>{children}</Provider>
+      </ThemeProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  const rendered = render(ui, { wrapper: Wrapper, ...renderOptions });
+
+  // Return an object with the store and all of RTL's query functions
+  return {
+    store,
+    ...rendered,
+    rerender: (newUi, options) => render(
+      newUi,
+      { container: rendered.container, wrapper: Wrapper, ...options },
+    ),
+  };
+}
+
+export * from '@testing-library/react';
+export { renderWithProviders as render };

jest.config.js

@@ -7,10 +7,13 @@ module.exports = {
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
-  setupFiles: [
+  setupFilesAfterEnv: [
     '<rootDir>/setupJest.js',
   ],
   testEnvironment: "jsdom",
+  testPathIgnorePatterns: [
+    "<rootDir>/__tests__/test-utils.js",
+  ],
   // Ignore Mirador code from jest transforms
   transformIgnorePatterns: [
     '<rootDir>/node_modules/(?!mirador|@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)'

setupJest.js

@@ -0,0 +1,2 @@
+
+import '@testing-library/jest-dom'