Giter VIP home page Giter VIP logo

Comments (12)

alexander-heimbuch avatar alexander-heimbuch commented on July 23, 2024

The applied typescript configuration still transpiles to node's require:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var redux_actions_1 = require("redux-actions");
var myAction = (0, redux_actions_1.createAction)('MY_ACTION');

This doesn't work with the ESM only build we currently have. @timche this could be a case why a commonJS export still might have relevance.

from redux-actions.

alexander-heimbuch avatar alexander-heimbuch commented on July 23, 2024

@kaelig With this configuration it should work: https://replit.com/@alexander-heimb/ReduxActionsV3BugReportTS

v3.0.0 provides the same API as v2.6.5, so for projects that might not be able to switch to ESM this should work as well. I will close this bug but if you that doesn't solve your issue feel free to reopen it.

from redux-actions.

kaelig avatar kaelig commented on July 23, 2024

Thank you! Simply adding the types did fix the build.

That said, for some reason our Jest + @swc/jest setup still throws the same error so I need to investigate further...

Any tips appreciated!

from redux-actions.

alexander-heimbuch avatar alexander-heimbuch commented on July 23, 2024

Hey @kaelig,
the jest error might be due to the configured jest runtime. Could you share the configuration? Btw. it just sprung to my mind that we worked for the same company (Salesforce) a while ago :D

from redux-actions.

kaelig avatar kaelig commented on July 23, 2024

Oh, what a fun coincidence!

Here's our jest.config.js configuration:

import hq from 'alias-hq';

const ESM_NODE_MODULES = {
  '@devcycle/devcycle-js-sdk/node_modules/uuid/*': ['uuid'],
  '@storybook/addon-docs/*': ['@mdx-js/react'],
  'markdown-table': undefined,
  'node-fetch': ['data-uri-to-buffer', 'fetch-blob', 'formdata-polyfill'],
  'parse-domain': ['ip-regex', 'is-ip'],
  'react-markdown': [
    'bail',
    'decode-named-character-reference',
    'hast-util-whitespace',
    'is-plain-obj',
    'mdast-util-from-markdown',
    'mdast-util-to-hast',
    'micromark',
    'remark-rehype',
    'trim-lines',
    'trough',
    'unified',
    'unist-util-generated',
  ],
  'strip-ansi': ['ansi-regex'],
};

const ignoreESMNodeModules = (delimiter = '|') => {
  return `<rootDir>/node_modules/(?!${Object.entries(ESM_NODE_MODULES)
    .map(([key, values = []]) => [key, ...values].join(delimiter))
    .join(delimiter)})`;
};

/** @type {import('jest').Config} */
// eslint-disable-next-line import/no-anonymous-default-export
export default {
  setupFiles: ['<rootDir>/test/setup.ts', 'jest-canvas-mock'],
  setupFilesAfterEnv: ['<rootDir>/test/setupAfterEnv.ts'],
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            decorators: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
          experimental: {
            plugins: [['jest_workaround', {}]],
          },
        },
      },
    ],
  },
  transformIgnorePatterns: [ignoreESMNodeModules()],
  automock: false,
  testMatch: [
    '<rootDir>/(src|functions)/**/*.spec.[jt]s?(x)',
    '<rootDir>/*.spec.[jt]s?(x)',
  ],
  modulePaths: ['<rootDir>/src', '<rootDir>/test'],
  moduleFileExtensions: ['js', 'cjs', 'json', 'jsx', 'ts', 'tsx'],
  moduleNameMapper: {
    '\\.(css|jpg|png|webp)$': '<rootDir>/test/empty-module.cjs',
    '\\.svg$': '<rootDir>/test/svg-file-mock.ts',
    // Load path aliases from tsconfig.json
    ...hq.get('jest', { format: 'array' }),
  },
  collectCoverageFrom: [
    'src/**/*.[jt]s?(x)',
    'functions/**/*.[jt]s?(x)',
    '!**/src/**/*.stories.[jt]s?(x)',
    '!**/node_modules/**',
    '!**/.netlify/**',
    '!**/src/config/**',
    '!**/src/ampli/**',
    '!**/__generated__/**',
    '!**/*.d.ts',
  ],
  reporters: [
    'default',
    [
      'jest-junit',
      { outputDirectory: 'reports/jest', outputName: 'report.xml' },
    ],
  ],
  testEnvironment: 'jest-environment-jsdom',
  testEnvironmentOptions: {
    url: 'http://localhost/',
    resources: 'usable',
  },
};

from redux-actions.

alexander-heimbuch avatar alexander-heimbuch commented on July 23, 2024

@kaelig did you tried to add redux-actions to the ESM_NODE_MODULES? Might be worth a try.

from redux-actions.

kaelig avatar kaelig commented on July 23, 2024

That's the first thing I tried, but sadly it didn't solve it :/

from redux-actions.

markthiessen avatar markthiessen commented on July 23, 2024

@kaelig did you solve this? Running into the same issue

from redux-actions.

kaelig avatar kaelig commented on July 23, 2024

I haven't had time to look into this dependency upgrade. Since 3.0.0 doesn't bring any new features, I've deprioritized it.

If anybody finds a workaround, please post here!

from redux-actions.

alexander-heimbuch avatar alexander-heimbuch commented on July 23, 2024

Hey @kaelig,

That is a valid approach. v3 is dedicated to bring ESM compatibility. In case you want to give it a try I managed to provide a minimal example with v3 and Jest: https://replit.com/@alexander-heimb/redux-actions-jest#jest.config.js

Also a different way would be to use vitest as an alternative test runner.

from redux-actions.

prathamesh-mutkure avatar prathamesh-mutkure commented on July 23, 2024

Hey @alexander-heimbuch, here's my jest config

"jest": {
    "globalSetup": "./test/jest.global-setup.js",
    "setupFilesAfterEnv": [
      "./test/jest-per-test-setup.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts",
      "!src/setup*.js",
      "!src/utils/DraggableManager/demo/*.tsx",
      "!src/utils/test/**/*.js",
      "!src/demo/**/*.js",
      "!src/types/*"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ],
    "transform": {
      "\\.(css|png)$": "./test/generic-file-transform.js",
      "\\.([jt]sx?|svg)$": "./test/babel-transform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$"
    ],
    "testEnvironment": "jsdom",
    "snapshotFormat": {
      "escapeString": true,
      "printBasicPrototype": true
    }
  }

The app is running fine but it's giving errors in test, it is giving Module Not Found error in all places where it's imported

Screenshot 2023-08-11 at 4 44 20 AM

@kaelig @markthiessen did you guys find any solution?

from redux-actions.

kaelig avatar kaelig commented on July 23, 2024

I haven't found any solutions, sorry!

from redux-actions.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.