Skip to content

[WTF-2485]: Remove enzyme from widget generator in preparation of React 19 #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LEGIO-SEXTA-FERRATA wants to merge 9 commits into
base: master
Choose a base branch
from
Open

[WTF-2485]: Remove enzyme from widget generator in preparation of React 19 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4a81c3e
Replace Enzyme with RTL
LEGIO-SEXTA-FERRATA Nov 28, 2025
66fbe7d
Adjust generator tests
LEGIO-SEXTA-FERRATA Nov 28, 2025
e413267
Bonus fix: update the year in copyright statement
LEGIO-SEXTA-FERRATA Nov 28, 2025
5c6c594
Remove enzyme commands
alihcsumer Dec 4, 2025
77dcc7b
Update the change log
alihcsumer Dec 4, 2025
fb1d082
Review: Refactor messages
alihcsumer Dec 10, 2025
c39ff24
Review: Update the changelog
alihcsumer Dec 10, 2025
6ef55e0
Review: Update enzyme detector
alihcsumer Dec 10, 2025
b23c9e0
Review: Expand enzyme detection
alihcsumer Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/generator-widget/generators/app/lib/prompttexts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function promptWidgetProperties(mxProjectDir, widgetName) {
type: "input",
name: "copyright",
message: "Add a copyright",
default: "© Mendix Technology BV 2022. All rights reserved.",
default: `© Mendix Technology BV ${new Date().getFullYear()}. All rights reserved.`,
store: true
},
{
Expand Down
2 changes: 2 additions & 0 deletions ...r-widget/generators/app/templates/packages/__tests__/outputs/package_web.json-js-e2e.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,12 @@
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
6 changes: 4 additions & 2 deletions ...get/generators/app/templates/packages/__tests__/outputs/package_web.json-js-unit-e2e.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci && npm run test:e2e",
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",
"test": "pluggable-widgets-tools test:unit:web && npm run test:e2e",
"test:unit": "pluggable-widgets-tools test:unit:web",
Copy link
Collaborator

@mlaponder mlaponder Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When running unit tests on a generated widget from the command line I get the following error:

AIL  src/components/__tests__/HelloWorldSample.spec.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

"test:e2e": "npx cypress open --browser chrome --e2e",
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web"
Expand All @@ -36,10 +36,12 @@
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
6 changes: 4 additions & 2 deletions ...-widget/generators/app/templates/packages/__tests__/outputs/package_web.json-js-unit.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci",
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",
"test": "pluggable-widgets-tools test:unit:web",
"test:unit": "pluggable-widgets-tools test:unit:web",
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web"
},
Expand All @@ -34,10 +34,12 @@
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
2 changes: 2 additions & 0 deletions ...rator-widget/generators/app/templates/packages/__tests__/outputs/package_web.json-js.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
5 changes: 4 additions & 1 deletion ...r-widget/generators/app/templates/packages/__tests__/outputs/package_web.json-ts-e2e.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
"devDependencies": {
"@mendix/pluggable-widgets-tools": "^10.15.0",
"@types/big.js": "^6.0.2",
"@types/enzyme": "^3.10.8",
"@types/jasmine": "^3.6.9",
"cypress": "^10.10.0"
},
Expand All @@ -37,12 +36,16 @@
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
10 changes: 6 additions & 4 deletions ...get/generators/app/templates/packages/__tests__/outputs/package_web.json-ts-unit-e2e.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,34 @@
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci && npm run test:e2e",
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",
"test": "pluggable-widgets-tools test:unit:web && npm run test:e2e",
"test:unit": "pluggable-widgets-tools test:unit:web",
"test:e2e": "npx cypress open --browser chrome --e2e",
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web"
},
"devDependencies": {
"@mendix/pluggable-widgets-tools": "^10.15.0",
"@types/big.js": "^6.0.2",
"@types/enzyme": "^3.10.8",
"@types/jasmine": "^3.6.9",
"@types/jest": "^29.0.0",
"@types/react-test-renderer": "~18.0.0",
"cypress": "^10.10.0"
},
"dependencies": {
"classnames": "^2.2.6"
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
12 changes: 7 additions & 5 deletions ...-widget/generators/app/templates/packages/__tests__/outputs/package_web.json-ts-unit.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,31 @@
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci",
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",
"test": "pluggable-widgets-tools test:unit:web",
"test:unit": "pluggable-widgets-tools test:unit:web",
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web"
},
"devDependencies": {
"@mendix/pluggable-widgets-tools": "^10.15.0",
"@types/big.js": "^6.0.2",
"@types/enzyme": "^3.10.8",
"@types/jest": "^29.0.0",
"@types/react-test-renderer": "~18.0.0"
"@types/jest": "^29.0.0"
},
"dependencies": {
"classnames": "^2.2.6"
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
4 changes: 4 additions & 0 deletions ...rator-widget/generators/app/templates/packages/__tests__/outputs/package_web.json-ts.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,16 @@
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",
"react-dom": "18.2.0",
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",
"react-native": "0.72.7"
}
}
22 changes: 12 additions & 10 deletions packages/generator-widget/generators/app/templates/packages/package_web.json.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,34 @@
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",<% if (hasUnitTests) { %>
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci<% if (hasE2eTests) { %> && npm run test:e2e<% } %>",
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",<% } %><% if (hasE2eTests) { %>
"test": "pluggable-widgets-tools test:unit:web<% if (hasE2eTests) { %> && npm run test:e2e<% } %>",
"test:unit": "pluggable-widgets-tools test:unit:web",<% } %><% if (hasE2eTests) { %>
"test:e2e": "npx cypress open --browser chrome --e2e",<% } %>
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web"
},
"devDependencies": {
"@mendix/pluggable-widgets-tools": "^10.15.0"<% if (isLanguageTS) { %>,
"@types/big.js": "^6.0.2"<% if (hasUnitTests || hasE2eTests) { %>,
"@types/enzyme": "^3.10.8"<% } %><% if (hasE2eTests) { %>,
"@types/big.js": "^6.0.2"<% if (hasE2eTests) { %>,
"@types/jasmine": "^3.6.9"<% } %><% if (hasUnitTests) { %>,
"@types/jest": "^29.0.0",
"@types/react-test-renderer": "~18.0.0"<% } %><% } %><% if (hasE2eTests) { %>,
"@types/jest": "^29.0.0"<% } %><% } %><% if (hasE2eTests) { %>,
"cypress": "^10.10.0"<% } %>
},
"dependencies": {
"classnames": "^2.2.6"
},
"resolutions": {
"react": "^18.2.0",<% if (isLanguageTS) { %>
"@types/react": "^18.2.0",<% } %>
"react": "^18.2.0",
"react-dom": "18.2.0",<% if (isLanguageTS) { %>
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",<% } %>
"react-native": "0.72.7"
},
"overrides": {
"react": "^18.2.0",<% if (isLanguageTS) { %>
"@types/react": "^18.2.0",<% } %>
"react": "^18.2.0",
"react-dom": "18.2.0",<% if (isLanguageTS) { %>
"@types/react": "^18.2.0",
"@types/react-dom": "18.2.0",<% } %>
"react-native": "0.72.7"
}
}
16 changes: 7 additions & 9 deletions ...ates/pluggable/web/emptyTemplateJs/src/components/__tests__/HelloWorldSample.spec.jsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import { createElement } from "react";
import { shallow } from "enzyme";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import { HelloWorldSample } from "../HelloWorldSample";

describe("HelloWorldSample", () => {
const createHelloWorld = (props) => shallow(<HelloWorldSample {...props} />);

it("should render the structure correctly", () => {
const helloWorldProps = {
sampleText: "World"
};
const helloWorld = createHelloWorld(helloWorldProps);

expect(
helloWorld.equals(
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
)
).toEqual(true);
const { container } = render(<HelloWorldSample {...helloWorldProps} />);

const helloWorld = container.querySelector(".widget-hello-world");
expect(helloWorld).toBeInTheDocument();
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
});
});
16 changes: 7 additions & 9 deletions ...es/pluggable/web/emptyTemplateJsFn/src/components/__tests__/HelloWorldSample.spec.jsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import { createElement } from "react";
import { shallow } from "enzyme";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import { HelloWorldSample } from "../HelloWorldSample";

describe("HelloWorldSample", () => {
const createHelloWorld = (props) => shallow(<HelloWorldSample {...props} />);

it("should render the structure correctly", () => {
const helloWorldProps = {
sampleText: "World"
};
const helloWorld = createHelloWorld(helloWorldProps);

expect(
helloWorld.equals(
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
)
).toEqual(true);
const { container } = render(<HelloWorldSample {...helloWorldProps} />);

const helloWorld = container.querySelector(".widget-hello-world");
expect(helloWorld).toBeInTheDocument();
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
});
});
15 changes: 6 additions & 9 deletions ...ates/pluggable/web/emptyTemplateTs/src/components/__tests__/HelloWorldSample.spec.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
import { createElement } from "react";
import { shallow, ShallowWrapper } from "enzyme";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import { HelloWorldSample, HelloWorldSampleProps } from "../HelloWorldSample";

describe("HelloWorldSample", () => {
const createHelloWorld = (props: HelloWorldSampleProps): ShallowWrapper => shallow(<HelloWorldSample {...props} />);

it("should render the structure correctly", () => {
const helloWorldProps: HelloWorldSampleProps = {
sampleText: "World"
};

const helloWorld = createHelloWorld(helloWorldProps);
const { container } = render(<HelloWorldSample {...helloWorldProps} />);

expect(
helloWorld.equals(
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
)
).toEqual(true);
const helloWorld = container.querySelector(".widget-hello-world");
expect(helloWorld).toBeInTheDocument();
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
});
});
15 changes: 6 additions & 9 deletions ...es/pluggable/web/emptyTemplateTsFn/src/components/__tests__/HelloWorldSample.spec.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
import { createElement } from "react";
import { shallow, ShallowWrapper } from "enzyme";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import { HelloWorldSample, HelloWorldSampleProps } from "../HelloWorldSample";

describe("HelloWorldSample", () => {
const createHelloWorld = (props: HelloWorldSampleProps): ShallowWrapper => shallow(<HelloWorldSample {...props} />);

it("should render the structure correctly", () => {
const helloWorldProps: HelloWorldSampleProps = {
sampleText: "World"
};

const helloWorld = createHelloWorld(helloWorldProps);
const { container } = render(<HelloWorldSample {...helloWorldProps} />);

expect(
helloWorld.equals(
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
)
).toEqual(true);
const helloWorld = container.querySelector(".widget-hello-world");
expect(helloWorld).toBeInTheDocument();
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
});
});
4 changes: 1 addition & 3 deletions ...enerators/app/templates/pluggable/web/fullTemplateJs/src/WidgetName.editorPreview.jsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Component, createElement } from "react";

import { parseInlineStyle } from "@mendix/pluggable-widgets-tools";

import { BadgeSample } from "./components/BadgeSample";
import { parseInlineStyle } from "@mendix/pluggable-widgets-tools";

export class preview extends Component {
render() {
Expand Down
2 changes: 1 addition & 1 deletion ...rator-widget/generators/app/templates/pluggable/web/fullTemplateJs/src/WidgetName.jsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import "./ui/<%- name %>.css";
import { Component, createElement } from "react";

import { BadgeSample } from "./components/BadgeSample";
import "./ui/<%- name %>.css";

export class <%- name %> extends Component {

Expand Down
2 changes: 1 addition & 1 deletion ...widget/generators/app/templates/pluggable/web/fullTemplateJs/src/components/Alert.jsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ReactNode, createElement } from "react";
import { Component, createElement } from "react";
import classNames from "classnames";

export class Alert extends Component {
Expand Down
Loading
Loading