search

microsoft / redux-micro-frontend

This is a library for using Redux to manage state for self-contained apps in a Micro-Frontend architecture. Each self-contained isolated app can have its own isolated and decoupled Redux store. The componentized stores interact with a global store for enabling cross-application communication.
MIT License
344 stars 64 forks source link

Re-open old issue with JEST testing #33

Closed cyberduck1 closed 2 years ago

cyberduck1 commented 2 years ago

[Related] https://github.com/microsoft/redux-micro-frontend/issues/8

This is the message I get

Details:

    ~/Project/node_modules/redux-micro-frontend/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './src/actions';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | /* eslint-disable @typescript-eslint/no-explicit-any */
    > 2 | import { GlobalStore, IAction } from 'redux-micro-frontend'
        | ^
      3 |
      4 | export interface Action<T = any> {
      5 |   type: T

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/services/globalState/index.tsx:2:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        6.445 s
Ran all test suites.

package.json

{
  "name": "@tools",
  "version": "1.0.311",
  "main": "index.ts",
  "private": true,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "@react-keycloak/web": "^3.4.0",
    "axios": "^0.21.1",
    "axios-hooks": "^2.3.0",
    "i18next": "^20.3.4",
    "i18next-browser-languagedetector": "^6.1.2",
    "i18next-resources-to-backend": "^1.0.0",
    "jsbi": "^3.1.6",
    "keycloak-js": "^12.0.3",
    "react": "^17.0.1",
    "react-error-boundary": "^3.1.1",
    "react-i18next": "^11.11.3",
    "react-use": "^17.2.4",
    "redux-micro-frontend": "^1.2.0",
    "rollbar": "^2.21.1",
    "ulid": "^2.3.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@testing-library/react-hooks": "^5.0.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^16.11.6",
    "@types/uuid": "^8.3.1",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/eslint-plugin-tslint": "^5.0.0",
    "@typescript-eslint/parser": "^4.29.0",
    "axios-mock-adapter": "^1.19.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "jest": "^26.6.3",
    "react-test-renderer": "^16.9.0",
    "ts-jest": "^26.5.1",
    "ts-node": "^9.1.1"
  },
  "scripts": {
    "test": "REF_URL=localhost:50000 jest",
    "lint": "eslint . --quiet",
    "clean": "rm -rf dist"
  }
}

jest.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  modulePathIgnorePatterns: ['<rootDir>/dist/'],
}

process.env['NUEVO_URL'] = 'http://localhost:50000'
cyberduck1 commented 2 years ago

OK so after 2 days trying to solve this, this is how I did it.

I just created a mock function to pass the expected values as I couldn't run the microservice cross apps for some reason.

jest.mock('redux-micro-frontend', () => {
  const GlobalStore = {
    Get: () => ({
      GetPartnerState: () => ({ REF_URL: 'http://localhost:50000' }),
    }),
  }
  return { GlobalStore }
})

I know it doesn't solve the issue entirely but at least it passes my tests