test: reinstate skipped research.routes test

craco.config.ts

@@ -1,4 +1,4 @@
-import type { WebpackConfigOverride } from '@craco/types'
+import type { WebpackConfigOverride, JestConfigOverride } from '@craco/types'
 import { DefinePlugin, ProvidePlugin } from 'webpack'
 import type { RuleSetRule } from 'webpack'
 
@@ -46,6 +46,18 @@ module.exports = {
       return webpackConfig
     },
   },
+
+  jest: {
+    configure: (jestConfig: JestConfigOverride['jestConfig']) => {
+      // https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/
+      jestConfig.moduleNameMapper = {
+        ...jestConfig.moduleNameMapper,
+        // Allow specific import from 'src' (used to import `useCommonStores`)
+        '^src$': '<rootDir>/src/index',
+      }
+      return jestConfig
+    },
+  },
 }
 
 /**

src/pages/Howto/Category/CategoriesSelect.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react'
 import { FieldContainer } from '../../../common/Form/FieldContainer'
 import { Select } from 'oa-components'
-import { useCommonStores } from 'src'
+import { useCommonStores } from 'src/index'
 import type { ICategory } from 'src/models/categories.model'
 
 export const CategoriesSelect = observer(

src/pages/Research/research.routes.test.skip.tsx → src/pages/Research/research.routes.test.tsx

@@ -1,5 +1,8 @@
 import '@testing-library/jest-dom'
 import ResearchRoutes from './research.routes'
+import Theme from 'src/themes/styled.theme'
+
+import { ThemeProvider } from '@theme-ui/core'
 import { render, waitFor, cleanup } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { Provider } from 'mobx-react'
@@ -10,7 +13,19 @@ jest.mock('src/index', () => ({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   __esModule: true,
   useCommonStores() {
-    return { stores: { userStore: { fetchAllVerifiedUsers: jest.fn() } } }
+    return {
+      stores: {
+        userStore: {
+          fetchAllVerifiedUsers: jest.fn(),
+        },
+        aggregationsStore: {
+          aggregations: {},
+        },
+        researchCategoriesStore: {
+          allResearchCategories: [],
+        },
+      },
+    }
   },
 }))
 
@@ -36,7 +51,6 @@ jest.mock('src/stores/Research/research.store', () => ({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   __esModule: true,
   useResearchStore() {
-    console.log('using research store')
     return mockResearchStore
   },
 }))
@@ -48,9 +62,11 @@ describe('research.routes', () => {
     it('renders the research listing', async () => {
       const wrapper = render(
         <Provider userStore={{}}>
-          <MemoryRouter initialEntries={['/research']}>
-            <ResearchRoutes />
-          </MemoryRouter>
+          <ThemeProvider theme={Theme}>
+            <MemoryRouter initialEntries={['/research']}>
+              <ResearchRoutes />
+            </MemoryRouter>
+          </ThemeProvider>
         </Provider>,
       )
       await waitFor(
@@ -65,10 +81,12 @@ describe('research.routes', () => {
   describe('/research/:slug', () => {
     it('renders an individual research article', async () => {
       const wrapper = render(
-        <Provider userStore={{}} themeStore={{}}>
-          <MemoryRouter initialEntries={['/research/research-slug']}>
-            <ResearchRoutes />
-          </MemoryRouter>
+        <Provider userStore={{}}>
+          <ThemeProvider theme={Theme}>
+            <MemoryRouter initialEntries={['/research/research-slug']}>
+              <ResearchRoutes />
+            </MemoryRouter>
+          </ThemeProvider>
         </Provider>,
       )
 
@@ -91,10 +109,12 @@ describe('research.routes', () => {
   describe('/research/create', () => {
     it('rejects a request without a user present', async () => {
       const wrapper = render(
-        <Provider userStore={{}} themeStore={{}}>
-          <MemoryRouter initialEntries={['/research/create']}>
-            <ResearchRoutes />
-          </MemoryRouter>
+        <Provider userStore={{}}>
+          <ThemeProvider theme={Theme}>
+            <MemoryRouter initialEntries={['/research/create']}>
+              <ResearchRoutes />
+            </MemoryRouter>
+          </ThemeProvider>
         </Provider>,
       )
 
@@ -111,7 +131,6 @@ describe('research.routes', () => {
           userStore={{
             user: { name: 'Jaasper' },
           }}
-          themeStore={{}}
         >
           <MemoryRouter initialEntries={['/research/create']}>
             <ResearchRoutes />
@@ -132,14 +151,15 @@ describe('research.routes', () => {
           userStore={{
             user: { name: 'Jaasper', userRoles: ['beta-tester'] },
           }}
-          themeStore={{}}
           tagsStore={{
             setTagsCategory: jest.fn(),
           }}
         >
-          <MemoryRouter initialEntries={['/research/create']}>
-            <ResearchRoutes />
-          </MemoryRouter>
+          <ThemeProvider theme={Theme}>
+            <MemoryRouter initialEntries={['/research/create']}>
+              <ResearchRoutes />
+            </MemoryRouter>
+          </ThemeProvider>
         </Provider>,
       )
 
@@ -157,7 +177,7 @@ describe('research.routes', () => {
   describe('/research/:slug/edit', () => {
     it('rejects a request without a user present', async () => {
       const wrapper = render(
-        <Provider userStore={{}} themeStore={{}}>
+        <Provider userStore={{}}>
           <MemoryRouter initialEntries={['/research/an-example/edit']}>
             <ResearchRoutes />
           </MemoryRouter>
@@ -189,7 +209,6 @@ describe('research.routes', () => {
           userStore={{
             user: { name: 'Jaasper', userRoles: ['beta-tester'] },
           }}
-          themeStore={{}}
           tagsStore={{
             setTagsCategory: jest.fn(),
           }}
@@ -209,7 +228,7 @@ describe('research.routes', () => {
   describe('/research/:slug/new-update', () => {
     it('rejects a request without a user present', async () => {
       const wrapper = render(
-        <Provider userStore={{}} themeStore={{}}>
+        <Provider userStore={{}}>
           <MemoryRouter initialEntries={['/research/an-example/new-update']}>
             <ResearchRoutes />
           </MemoryRouter>
@@ -242,7 +261,6 @@ describe('research.routes', () => {
           userStore={{
             user: { name: 'Jaasper', userRoles: ['beta-tester'] },
           }}
-          themeStore={{}}
           tagsStore={{
             setTagsCategory: jest.fn(),
           }}
@@ -262,7 +280,7 @@ describe('research.routes', () => {
   describe('/research/:slug/edit-update', () => {
     it('rejects a request without a user present', async () => {
       const wrapper = render(
-        <Provider userStore={{}} themeStore={{}}>
+        <Provider userStore={{}}>
           <MemoryRouter
             initialEntries={[
               '/research/an-example/edit-update/nested-research-update',
@@ -299,7 +317,6 @@ describe('research.routes', () => {
           userStore={{
             user: { name: 'Jaasper', userRoles: ['beta-tester'] },
           }}
-          themeStore={{}}
         >
           <MemoryRouter
             initialEntries={[