Skip to content

Commit 4a81c3e

Browse files
LEGIO-SEXTA-FERRATALEGIO-SEXTA-FERRATA
committed
Replace Enzyme with RTL
1 parent 5b4e86c commit 4a81c3e

File tree

13 files changed

+234
-230
lines changed

13 files changed

+234
-230
lines changed

‎packages/generator-widget/generators/app/templates/packages/package_web.json.ejs‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,34 @@
2121
"build": "pluggable-widgets-tools build:web",
2222
"lint": "pluggable-widgets-tools lint",
2323
"lint:fix": "pluggable-widgets-tools lint:fix",<% if (hasUnitTests) { %>
24-
"test": "pluggable-widgets-tools test:unit:web --no-cache --ci<% if (hasE2eTests) { %> && npm run test:e2e<% } %>",
25-
"test:unit": "pluggable-widgets-tools test:unit:web --coverage",<% } %><% if (hasE2eTests) { %>
24+
"test": "pluggable-widgets-tools test:unit:web:enzyme-free<% if (hasE2eTests) { %> && npm run test:e2e<% } %>",
25+
"test:unit": "pluggable-widgets-tools test:unit:web:enzyme-free",<% } %><% if (hasE2eTests) { %>
2626
"test:e2e": "npx cypress open --browser chrome --e2e",<% } %>
2727
"prerelease": "npm run lint",
2828
"release": "pluggable-widgets-tools release:web"
2929
},
3030
"devDependencies": {
3131
"@mendix/pluggable-widgets-tools": "^10.15.0"<% if (isLanguageTS) { %>,
32-
"@types/big.js": "^6.0.2"<% if (hasUnitTests || hasE2eTests) { %>,
33-
"@types/enzyme": "^3.10.8"<% } %><% if (hasE2eTests) { %>,
32+
"@types/big.js": "^6.0.2"<% if (hasE2eTests) { %>,
3433
"@types/jasmine": "^3.6.9"<% } %><% if (hasUnitTests) { %>,
35-
"@types/jest": "^29.0.0",
36-
"@types/react-test-renderer": "~18.0.0"<% } %><% } %><% if (hasE2eTests) { %>,
34+
"@types/jest": "^29.0.0"<% } %><% } %><% if (hasE2eTests) { %>,
3735
"cypress": "^10.10.0"<% } %>
3836
},
3937
"dependencies": {
4038
"classnames": "^2.2.6"
4139
},
4240
"resolutions": {
43-
"react": "^18.2.0",<% if (isLanguageTS) { %>
44-
"@types/react": "^18.2.0",<% } %>
41+
"react": "^18.2.0",
42+
"react-dom": "18.2.0",<% if (isLanguageTS) { %>
43+
"@types/react": "^18.2.0",
44+
"@types/react-dom": "18.2.0",<% } %>
4545
"react-native": "0.72.7"
4646
},
4747
"overrides": {
48-
"react": "^18.2.0",<% if (isLanguageTS) { %>
49-
"@types/react": "^18.2.0",<% } %>
48+
"react": "^18.2.0",
49+
"react-dom": "18.2.0",<% if (isLanguageTS) { %>
50+
"@types/react": "^18.2.0",
51+
"@types/react-dom": "18.2.0",<% } %>
5052
"react-native": "0.72.7"
5153
}
5254
}

‎packages/generator-widget/generators/app/templates/pluggable/web/emptyTemplateJs/src/components/__tests__/HelloWorldSample.spec.jsx.ejs‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import { createElement } from "react";
2-
import { shallow } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
34

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

67
describe("HelloWorldSample", () => {
7-
const createHelloWorld = (props) => shallow(<HelloWorldSample {...props} />);
8-
98
it("should render the structure correctly", () => {
109
const helloWorldProps = {
1110
sampleText: "World"
1211
};
13-
const helloWorld = createHelloWorld(helloWorldProps);
1412

15-
expect(
16-
helloWorld.equals(
17-
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
18-
)
19-
).toEqual(true);
13+
const { container } = render(<HelloWorldSample {...helloWorldProps} />);
14+
15+
const helloWorld = container.querySelector(".widget-hello-world");
16+
expect(helloWorld).toBeInTheDocument();
17+
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
2018
});
2119
});

‎packages/generator-widget/generators/app/templates/pluggable/web/emptyTemplateJsFn/src/components/__tests__/HelloWorldSample.spec.jsx.ejs‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import { createElement } from "react";
2-
import { shallow } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
34

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

67
describe("HelloWorldSample", () => {
7-
const createHelloWorld = (props) => shallow(<HelloWorldSample {...props} />);
8-
98
it("should render the structure correctly", () => {
109
const helloWorldProps = {
1110
sampleText: "World"
1211
};
13-
const helloWorld = createHelloWorld(helloWorldProps);
1412

15-
expect(
16-
helloWorld.equals(
17-
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
18-
)
19-
).toEqual(true);
13+
const { container } = render(<HelloWorldSample {...helloWorldProps} />);
14+
15+
const helloWorld = container.querySelector(".widget-hello-world");
16+
expect(helloWorld).toBeInTheDocument();
17+
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
2018
});
2119
});

‎packages/generator-widget/generators/app/templates/pluggable/web/emptyTemplateTs/src/components/__tests__/HelloWorldSample.spec.tsx.ejs‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
import { createElement } from "react";
2-
import { shallow, ShallowWrapper } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
34

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

67
describe("HelloWorldSample", () => {
7-
const createHelloWorld = (props: HelloWorldSampleProps): ShallowWrapper => shallow(<HelloWorldSample {...props} />);
8-
98
it("should render the structure correctly", () => {
109
const helloWorldProps: HelloWorldSampleProps = {
1110
sampleText: "World"
1211
};
1312

14-
const helloWorld = createHelloWorld(helloWorldProps);
13+
const { container } = render(<HelloWorldSample {...helloWorldProps} />);
1514

16-
expect(
17-
helloWorld.equals(
18-
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
19-
)
20-
).toEqual(true);
15+
const helloWorld = container.querySelector(".widget-hello-world");
16+
expect(helloWorld).toBeInTheDocument();
17+
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
2118
});
2219
});

‎packages/generator-widget/generators/app/templates/pluggable/web/emptyTemplateTsFn/src/components/__tests__/HelloWorldSample.spec.tsx.ejs‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
import { createElement } from "react";
2-
import { shallow, ShallowWrapper } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
34

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

67
describe("HelloWorldSample", () => {
7-
const createHelloWorld = (props: HelloWorldSampleProps): ShallowWrapper => shallow(<HelloWorldSample {...props} />);
8-
98
it("should render the structure correctly", () => {
109
const helloWorldProps: HelloWorldSampleProps = {
1110
sampleText: "World"
1211
};
1312

14-
const helloWorld = createHelloWorld(helloWorldProps);
13+
const { container } = render(<HelloWorldSample {...helloWorldProps} />);
1514

16-
expect(
17-
helloWorld.equals(
18-
<div className="widget-hello-world">Hello {helloWorldProps.sampleText}</div>
19-
)
20-
).toEqual(true);
15+
const helloWorld = container.querySelector(".widget-hello-world");
16+
expect(helloWorld).toBeInTheDocument();
17+
expect(helloWorld).toHaveTextContent(`Hello ${helloWorldProps.sampleText}`);
2118
});
2219
});

‎packages/generator-widget/generators/app/templates/pluggable/web/fullTemplateJs/src/components/__tests__/Alert.spec.jsx.ejs‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
import { createElement } from "react";
2-
import { shallow } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
34

45
import { Alert } from "../Alert";
56

67
describe("Alert", () => {
78
it("renders the structure when an alert message is specified", () => {
89
const message = "This is an error";
9-
const alert = shallow(<Alert
10-
bootstrapStyle="danger"
11-
className="widget-badge-alert"
12-
message={message}/>);
10+
const { container } = render(
11+
<Alert
12+
bootstrapStyle="danger"
13+
className="widget-badge-alert"
14+
message={message}
15+
/>
16+
);
1317

14-
expect(alert.equals(
15-
<div className="alert alert-danger widget-badge-alert">{message}</div>
16-
)).toEqual(true);
18+
const alertElement = container.querySelector(".alert.alert-danger.widget-badge-alert");
19+
expect(alertElement).toBeInTheDocument();
20+
expect(alertElement).toHaveTextContent(message);
1721
});
1822

1923
it("renders no structure when the alert message is not specified", () => {
20-
const alert = shallow(<Alert bootstrapStyle="danger"/>);
24+
const { container } = render(<Alert bootstrapStyle="danger" />);
2125

22-
expect(alert.isEmptyRender()).toEqual(true);
26+
expect(container.firstChild).toBeNull();
2327
});
2428
});

‎packages/generator-widget/generators/app/templates/pluggable/web/fullTemplateJs/src/components/__tests__/BadgeSample.spec.jsx.ejs‎

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,100 @@
11
import { createElement } from "react";
2-
import { shallow } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import userEvent from "@testing-library/user-event";
4+
import "@testing-library/jest-dom";
35

46
import { BadgeSample } from "../BadgeSample";
57

68
describe("Badge", () => {
7-
const createBadge = (props) => shallow(<BadgeSample {...props} />);
8-
99
it("should render the structure", () => {
1010
const badgeProps = {
1111
type: "badge",
1212
bootstrapStyle: "default",
1313
value: "0"
1414
};
15-
const badge = createBadge(badgeProps);
15+
const { container } = render(<BadgeSample {...badgeProps} />);
1616

17-
expect(
18-
badge.equals(
19-
<span className="widget-<%- packageName %> badge label-default">0</span>
20-
)
21-
).toEqual(true);
17+
const badge = container.querySelector("span.widget-<%- packageName %>.badge.label-default");
18+
expect(badge).toBeInTheDocument();
19+
expect(badge).toHaveTextContent("0");
2220
});
2321

2422
it("should show value when no value or default value provided", () => {
2523
const value = "value";
26-
const badge = createBadge({ type: "label", value, defaultValue: "default value" });
24+
const { container } = render(<BadgeSample type="label" value={value} defaultValue="default value" />);
2725

28-
expect(badge.text()).toBe(value);
26+
expect(container.querySelector("span")).toHaveTextContent(value);
2927
});
3028

3129
it("should show default value when no value is provided", () => {
3230
const defaultValue = "default";
33-
const badge = createBadge({ type: "label", value: undefined, defaultValue });
31+
const { container } = render(<BadgeSample type="label" value={undefined} defaultValue={defaultValue} />);
3432

35-
expect(badge.text()).toBe(defaultValue);
33+
expect(container.querySelector("span")).toHaveTextContent(defaultValue);
3634
});
3735

3836
it("should show no value when no value or default value provided", () => {
39-
const badge = createBadge({ type: "label", value: undefined });
37+
const { container } = render(<BadgeSample type="label" value={undefined} />);
4038

41-
expect(badge.text()).toBe("");
39+
expect(container.querySelector("span")).toHaveTextContent("");
4240
});
4341

4442
it("configured as a label should have the class label", () => {
45-
const badge = createBadge({ type: "label" });
43+
const { container } = render(<BadgeSample type="label" />);
4644

47-
expect(badge.hasClass("label")).toBe(true);
45+
expect(container.querySelector("span")).toHaveClass("label");
4846
});
4947

5048
it("configured as a badge should have the class badge", () => {
51-
const badge = createBadge({ type: "badge" });
49+
const { container } = render(<BadgeSample type="badge" />);
5250

53-
expect(badge.hasClass("badge")).toBe(true);
51+
expect(container.querySelector("span")).toHaveClass("badge");
5452
});
5553

56-
it("with a click action should respond to click events", () => {
57-
const badgeProps = { onClickAction: jest.fn(), type: "badge" };
58-
const onClick = badgeProps.onClickAction = jest.fn();
59-
const badge = createBadge(badgeProps);
54+
it("with a click action should respond to click events", async () => {
55+
const user = userEvent.setup();
56+
const onClick = jest.fn();
57+
const { container } = render(<BadgeSample onClickAction={onClick} type="badge" />);
6058

61-
badge.simulate("click");
59+
const badge = container.querySelector("span");
60+
await user.click(badge);
6261

6362
expect(onClick).toHaveBeenCalledTimes(1);
6463
});
6564

6665
it("with the Bootstrap style default should have the class label-default", () => {
67-
const badge = createBadge({ bootstrapStyle: "default", type: "badge" });
66+
const { container } = render(<BadgeSample bootstrapStyle="default" type="badge" />);
6867

69-
expect(badge.hasClass("label-default")).toBe(true);
68+
expect(container.querySelector("span")).toHaveClass("label-default");
7069
});
7170

7271
it("with the Bootstrap style primary should have the class label-primary", () => {
73-
const badge = createBadge({ bootstrapStyle: "primary", type: "badge" });
72+
const { container } = render(<BadgeSample bootstrapStyle="primary" type="badge" />);
7473

75-
expect(badge.hasClass("label-primary")).toBe(true);
74+
expect(container.querySelector("span")).toHaveClass("label-primary");
7675
});
7776

7877
it("with the Bootstrap style success should have the class label-success", () => {
79-
const badge = createBadge({ bootstrapStyle: "success", type: "badge" });
78+
const { container } = render(<BadgeSample bootstrapStyle="success" type="badge" />);
8079

81-
expect(badge.hasClass("label-success")).toBe(true);
80+
expect(container.querySelector("span")).toHaveClass("label-success");
8281
});
8382

8483
it("with the Bootstrap style info should have the class label-info", () => {
85-
const badge = createBadge({ bootstrapStyle: "info", type: "badge" });
84+
const { container } = render(<BadgeSample bootstrapStyle="info" type="badge" />);
8685

87-
expect(badge.hasClass("label-info")).toBe(true);
86+
expect(container.querySelector("span")).toHaveClass("label-info");
8887
});
8988

9089
it("with the Bootstrap style warning should have the class label-warning", () => {
91-
const badge = createBadge({ bootstrapStyle: "warning", type: "badge" });
90+
const { container } = render(<BadgeSample bootstrapStyle="warning" type="badge" />);
9291

93-
expect(badge.hasClass("label-warning")).toBe(true);
92+
expect(container.querySelector("span")).toHaveClass("label-warning");
9493
});
9594

9695
it("with the Bootstrap style danger should have the class label-danger", () => {
97-
const badge = createBadge({ bootstrapStyle: "danger", type: "badge" });
96+
const { container } = render(<BadgeSample bootstrapStyle="danger" type="badge" />);
9897

99-
expect(badge.hasClass("label-danger")).toBe(true);
98+
expect(container.querySelector("span")).toHaveClass("label-danger");
10099
});
101100
});

‎packages/generator-widget/generators/app/templates/pluggable/web/fullTemplateJsFn/src/components/__tests__/Alert.spec.jsx.ejs‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
import { createElement } from "react";
2-
import { shallow } from "enzyme";
2+
import { render } from "@testing-library/react";
3+
import "@testing-library/jest-dom";
34

45
import { Alert } from "../Alert";
56

67
describe("Alert", () => {
78
it("renders the structure when an alert message is specified", () => {
89
const message = "This is an error";
9-
const alert = shallow(<Alert
10-
bootstrapStyle="danger"
11-
className="widget-badge-alert"
12-
message={message}/>);
10+
const { container } = render(
11+
<Alert
12+
bootstrapStyle="danger"
13+
className="widget-badge-alert"
14+
message={message}
15+
/>
16+
);
1317

14-
expect(alert.equals(
15-
<div className="alert alert-danger widget-badge-alert">{message}</div>
16-
)).toEqual(true);
18+
const alertElement = container.querySelector(".alert.alert-danger.widget-badge-alert");
19+
expect(alertElement).toBeInTheDocument();
20+
expect(alertElement).toHaveTextContent(message);
1721
});
1822

1923
it("renders no structure when the alert message is not specified", () => {
20-
const alert = shallow(<Alert bootstrapStyle="danger"/>);
24+
const { container } = render(<Alert bootstrapStyle="danger" />);
2125

22-
expect(alert.isEmptyRender()).toEqual(true);
26+
expect(container.firstChild).toBeNull();
2327
});
2428
});

0 commit comments

Comments
 (0)