Skip to content

Commit 43e31d2

Browse files
hipstersmoothiehipstersmoothie
committed
fix tests
1 parent 995e842 commit 43e31d2

4 files changed

Lines changed: 1063 additions & 2158 deletions

File tree

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@
3939
"flat-cache": "^3.0.4",
4040
"micromatch": "^4.0.2",
4141
"react-docgen-typescript": "^2.2.2",
42-
"tslib": "^2.0.0"
42+
"tslib": "^2.6.2"
4343
},
4444
"devDependencies": {
4545
"@types/debug": "^4.1.5",
4646
"@types/find-cache-dir": "^3.2.0",
4747
"@types/flat-cache": "^2.0.0",
48-
"@types/jest": "^26.0.23",
48+
"@types/jest": "^29.5.12",
4949
"@types/micromatch": "^4.0.1",
5050
"@types/node": "^14.0.12",
5151
"@types/react": "^17.0.0",
@@ -62,12 +62,12 @@
6262
"eslint-plugin-jsdoc": "^48.2.1",
6363
"eslint-plugin-jsx-a11y": "^6.8.0",
6464
"eslint-plugin-prettier": "^5.1.3",
65-
"jest": "^26.6.3",
65+
"jest": "^29.7.0",
6666
"memfs": "^3.2.2",
6767
"memory-fs": "^0.5.0",
6868
"prettier": "^2.0.5",
6969
"react": "^17.0.1",
70-
"ts-jest": "^26.5.6",
70+
"ts-jest": "^29.1.2",
7171
"ts-loader": "^9.1.2",
7272
"typescript": "5.4.2",
7373
"webpack": "^5.36.2",

‎src/__tests__/__snapshots__/generateDocgenCodeBlock.test.ts.snap‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`adds component to docgen collection 1`] = `
4-
"import * as React from \\"react\\";
4+
"import * as React from "react";
55
66
interface SimpleComponentProps {
77
/** Button color. */
8-
color: \\"blue\\" | \\"green\\";
8+
color: "blue" | "green";
99
}
1010
1111
/**
@@ -17,27 +17,27 @@ export const SimpleComponent: React.FC<SimpleComponentProps> = (props) => (
1717
1818
try {
1919
// @ts-ignore
20-
SimpleComponent.displayName = \\"SimpleComponent\\";
20+
SimpleComponent.displayName = "SimpleComponent";
2121
// @ts-ignore
22-
SimpleComponent.__docgenInfo = { \\"description\\": \\"A simple component.\\", \\"displayName\\": \\"SimpleComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } } } };
22+
SimpleComponent.__docgenInfo = { "description": "A simple component.", "displayName": "SimpleComponent", "props": { "color": { "defaultValue": null, "description": "Button color.", "name": "color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } } } };
2323
// @ts-ignore
24-
if (typeof STORYBOOK_REACT_CLASSES !== \\"undefined\\")
24+
if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
2525
// @ts-ignore
26-
STORYBOOK_REACT_CLASSES[\\"Simple.tsx#SimpleComponent\\"] = { docgenInfo: SimpleComponent.__docgenInfo, name: \\"SimpleComponent\\", path: \\"Simple.tsx#SimpleComponent\\" };
26+
STORYBOOK_REACT_CLASSES["Simple.tsx#SimpleComponent"] = { docgenInfo: SimpleComponent.__docgenInfo, name: "SimpleComponent", path: "Simple.tsx#SimpleComponent" };
2727
}
2828
catch (__react_docgen_typescript_loader_error) { }"
2929
`;
3030
3131
exports[`component fixture DefaultPropValue.tsx has code block generated 1`] = `
32-
"import * as React from \\"react\\";
32+
"import * as React from "react";
3333
3434
interface DefaultPropValueComponentProps {
3535
/**
3636
* Button color.
3737
*
3838
* @default blue
3939
**/
40-
color: \\"blue\\" | \\"green\\";
40+
color: "blue" | "green";
4141
4242
/**
4343
* Button counter.
@@ -72,15 +72,15 @@ DefaultPropValueComponent.defaultProps = {
7272
7373
try {
7474
// @ts-ignore
75-
DefaultPropValueComponent.displayName = \\"DefaultPropValueComponent\\";
75+
DefaultPropValueComponent.displayName = "DefaultPropValueComponent";
7676
// @ts-ignore
77-
DefaultPropValueComponent.__docgenInfo = { \\"description\\": \\"Component with a prop with a default value.\\", \\"displayName\\": \\"DefaultPropValueComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": { value: \\"blue\\" }, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } }, \\"counter\\": { \\"defaultValue\\": { value: 123 }, \\"description\\": \\"Button counter.\\", \\"name\\": \\"counter\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } }, \\"disabled\\": { \\"defaultValue\\": { value: false }, \\"description\\": \\"Button disabled.\\", \\"name\\": \\"disabled\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"boolean\\" } }, \\"tabIndex\\": { \\"defaultValue\\": { value: -1 }, \\"description\\": \\"\\", \\"name\\": \\"tabIndex\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } } } };
77+
DefaultPropValueComponent.__docgenInfo = { "description": "Component with a prop with a default value.", "displayName": "DefaultPropValueComponent", "props": { "color": { "defaultValue": { value: "blue" }, "description": "Button color.", "name": "color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } }, "counter": { "defaultValue": { value: 123 }, "description": "Button counter.", "name": "counter", "required": false, "type": { "name": "number" } }, "disabled": { "defaultValue": { value: false }, "description": "Button disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": { value: -1 }, "description": "", "name": "tabIndex", "required": false, "type": { "name": "number" } } } };
7878
}
7979
catch (__react_docgen_typescript_loader_error) { }"
8080
`;
8181
8282
exports[`component fixture DisplayName.tsx has code block generated 1`] = `
83-
"import * as React from \\"react\\";
83+
"import * as React from "react";
8484
8585
interface ButtonComponentProps {
8686
text: string;
@@ -90,23 +90,23 @@ export const Button = (props: ButtonComponentProps) => (
9090
<button>{props.text}</button>
9191
);
9292
93-
Button.displayName = \\"MyButtonDisplayName\\";
93+
Button.displayName = "MyButtonDisplayName";
9494
9595
try {
9696
// @ts-ignore
97-
MyButtonDisplayName.displayName = \\"MyButtonDisplayName\\";
97+
MyButtonDisplayName.displayName = "MyButtonDisplayName";
9898
// @ts-ignore
99-
Button.__docgenInfo = { \\"description\\": \\"\\", \\"displayName\\": \\"MyButtonDisplayName\\", \\"props\\": { \\"text\\": { \\"defaultValue\\": null, \\"description\\": \\"\\", \\"name\\": \\"text\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"string\\" } } } };
99+
Button.__docgenInfo = { "description": "", "displayName": "MyButtonDisplayName", "props": { "text": { "defaultValue": null, "description": "", "name": "text", "required": true, "type": { "name": "string" } } } };
100100
}
101101
catch (__react_docgen_typescript_loader_error) { }"
102102
`;
103103
104104
exports[`component fixture HyphenatedPropName.tsx has code block generated 1`] = `
105-
"import * as React from \\"react\\";
105+
"import * as React from "react";
106106
107107
interface HyphenatedPropNameProps {
108108
/** Button color. */
109-
\\"button-color\\": \\"blue\\" | \\"green\\";
109+
"button-color": "blue" | "green";
110110
}
111111
112112
/**
@@ -115,29 +115,29 @@ interface HyphenatedPropNameProps {
115115
export const HyphenatedPropNameComponent: React.FC<HyphenatedPropNameProps> = (
116116
props
117117
) => (
118-
<button style={{ backgroundColor: props[\\"button-color\\"] }}>
118+
<button style={{ backgroundColor: props["button-color"] }}>
119119
{props.children}
120120
</button>
121121
);
122122
123123
try {
124124
// @ts-ignore
125-
HyphenatedPropNameComponent.displayName = \\"HyphenatedPropNameComponent\\";
125+
HyphenatedPropNameComponent.displayName = "HyphenatedPropNameComponent";
126126
// @ts-ignore
127-
HyphenatedPropNameComponent.__docgenInfo = { \\"description\\": \\"A component with a hyphenated prop name.\\", \\"displayName\\": \\"HyphenatedPropNameComponent\\", \\"props\\": { \\"button-color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"button-color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } } } };
127+
HyphenatedPropNameComponent.__docgenInfo = { "description": "A component with a hyphenated prop name.", "displayName": "HyphenatedPropNameComponent", "props": { "button-color": { "defaultValue": null, "description": "Button color.", "name": "button-color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } } } };
128128
}
129129
catch (__react_docgen_typescript_loader_error) { }"
130130
`;
131131
132132
exports[`component fixture MultiProps.tsx has code block generated 1`] = `
133-
"import * as React from \\"react\\";
133+
"import * as React from "react";
134134
135135
interface MultiPropsComponentProps {
136136
/** Button color. */
137-
color: \\"blue\\" | \\"green\\";
137+
color: "blue" | "green";
138138
139139
/** Button size. */
140-
size: \\"small\\" | \\"large\\";
140+
size: "small" | "large";
141141
}
142142
143143
/**
@@ -149,19 +149,19 @@ export const MultiPropsComponent: React.FC<MultiPropsComponentProps> = (
149149
150150
try {
151151
// @ts-ignore
152-
MultiPropsComponent.displayName = \\"MultiPropsComponent\\";
152+
MultiPropsComponent.displayName = "MultiPropsComponent";
153153
// @ts-ignore
154-
MultiPropsComponent.__docgenInfo = { \\"description\\": \\"This is a component with multiple props.\\", \\"displayName\\": \\"MultiPropsComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } }, \\"size\\": { \\"defaultValue\\": null, \\"description\\": \\"Button size.\\", \\"name\\": \\"size\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"small\\\\\\" | \\\\\\"large\\\\\\"\\" } } } };
154+
MultiPropsComponent.__docgenInfo = { "description": "This is a component with multiple props.", "displayName": "MultiPropsComponent", "props": { "color": { "defaultValue": null, "description": "Button color.", "name": "color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } }, "size": { "defaultValue": null, "description": "Button size.", "name": "size", "required": true, "type": { "name": "\\"small\\" | \\"large\\"" } } } };
155155
}
156156
catch (__react_docgen_typescript_loader_error) { }"
157157
`;
158158
159159
exports[`component fixture MultilineDescription.tsx has code block generated 1`] = `
160-
"import * as React from \\"react\\";
160+
"import * as React from "react";
161161
162162
interface MultilineDescriptionProps {
163163
/** Button color. */
164-
color: \\"blue\\" | \\"green\\";
164+
color: "blue" | "green";
165165
}
166166
167167
/**
@@ -175,23 +175,23 @@ export const MultilineDescriptionComponent: React.FC<MultilineDescriptionProps>
175175
176176
try {
177177
// @ts-ignore
178-
MultilineDescriptionComponent.displayName = \\"MultilineDescriptionComponent\\";
178+
MultilineDescriptionComponent.displayName = "MultilineDescriptionComponent";
179179
// @ts-ignore
180-
MultilineDescriptionComponent.__docgenInfo = { \\"description\\": \\"A component with a multiline description.\\\\n\\\\nSecond line.\\", \\"displayName\\": \\"MultilineDescriptionComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } } } };
180+
MultilineDescriptionComponent.__docgenInfo = { "description": "A component with a multiline description.\\n\\nSecond line.", "displayName": "MultilineDescriptionComponent", "props": { "color": { "defaultValue": null, "description": "Button color.", "name": "color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } } } };
181181
}
182182
catch (__react_docgen_typescript_loader_error) { }"
183183
`;
184184
185185
exports[`component fixture MultilinePropDescription.tsx has code block generated 1`] = `
186-
"import * as React from \\"react\\";
186+
"import * as React from "react";
187187
188188
interface MultilinePropDescriptionComponentProps {
189189
/**
190190
* This is a multiline prop description.
191191
*
192192
* Second line.
193193
*/
194-
color: \\"blue\\" | \\"green\\";
194+
color: "blue" | "green";
195195
}
196196
197197
/**
@@ -203,19 +203,19 @@ export const MultilinePropDescriptionComponent: React.FC<MultilinePropDescriptio
203203
204204
try {
205205
// @ts-ignore
206-
MultilinePropDescriptionComponent.displayName = \\"MultilinePropDescriptionComponent\\";
206+
MultilinePropDescriptionComponent.displayName = "MultilinePropDescriptionComponent";
207207
// @ts-ignore
208-
MultilinePropDescriptionComponent.__docgenInfo = { \\"description\\": \\"A component with multiline prop description.\\", \\"displayName\\": \\"MultilinePropDescriptionComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"This is a multiline prop description.\\\\n\\\\nSecond line.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } } } };
208+
MultilinePropDescriptionComponent.__docgenInfo = { "description": "A component with multiline prop description.", "displayName": "MultilinePropDescriptionComponent", "props": { "color": { "defaultValue": null, "description": "This is a multiline prop description.\\n\\nSecond line.", "name": "color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } } } };
209209
}
210210
catch (__react_docgen_typescript_loader_error) { }"
211211
`;
212212
213213
exports[`component fixture Simple.tsx has code block generated 1`] = `
214-
"import * as React from \\"react\\";
214+
"import * as React from "react";
215215
216216
interface SimpleComponentProps {
217217
/** Button color. */
218-
color: \\"blue\\" | \\"green\\";
218+
color: "blue" | "green";
219219
}
220220
221221
/**
@@ -227,15 +227,15 @@ export const SimpleComponent: React.FC<SimpleComponentProps> = (props) => (
227227
228228
try {
229229
// @ts-ignore
230-
SimpleComponent.displayName = \\"SimpleComponent\\";
230+
SimpleComponent.displayName = "SimpleComponent";
231231
// @ts-ignore
232-
SimpleComponent.__docgenInfo = { \\"description\\": \\"A simple component.\\", \\"displayName\\": \\"SimpleComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } } } };
232+
SimpleComponent.__docgenInfo = { "description": "A simple component.", "displayName": "SimpleComponent", "props": { "color": { "defaultValue": null, "description": "Button color.", "name": "color", "required": true, "type": { "name": "\\"blue\\" | \\"green\\"" } } } };
233233
}
234234
catch (__react_docgen_typescript_loader_error) { }"
235235
`;
236236
237237
exports[`component fixture TextOnlyComponent.tsx has code block generated 1`] = `
238-
"import * as React from \\"react\\";
238+
"import * as React from "react";
239239
240240
/**
241241
* A component with only text content wrapped in a div.
@@ -248,23 +248,23 @@ export const SimpleComponent: React.FC<{}> = () => (
248248
249249
try {
250250
// @ts-ignore
251-
SimpleComponent.displayName = \\"SimpleComponent\\";
251+
SimpleComponent.displayName = "SimpleComponent";
252252
// @ts-ignore
253-
SimpleComponent.__docgenInfo = { \\"description\\": \\"A component with only text content wrapped in a div.\\\\n\\\\nRef: https://github.com/strothj/react-docgen-typescript-loader/issues/7\\", \\"displayName\\": \\"SimpleComponent\\", \\"props\\": {} };
253+
SimpleComponent.__docgenInfo = { "description": "A component with only text content wrapped in a div.\\n\\nRef: https://github.com/strothj/react-docgen-typescript-loader/issues/7", "displayName": "SimpleComponent", "props": {} };
254254
}
255255
catch (__react_docgen_typescript_loader_error) { }"
256256
`;
257257
258258
exports[`generates value info for enums 1`] = `
259-
"import * as React from \\"react\\";
259+
"import * as React from "react";
260260
261261
interface DefaultPropValueComponentProps {
262262
/**
263263
* Button color.
264264
*
265265
* @default blue
266266
**/
267-
color: \\"blue\\" | \\"green\\";
267+
color: "blue" | "green";
268268
269269
/**
270270
* Button counter.
@@ -299,9 +299,9 @@ DefaultPropValueComponent.defaultProps = {
299299
300300
try {
301301
// @ts-ignore
302-
DefaultPropValueComponent.displayName = \\"DefaultPropValueComponent\\";
302+
DefaultPropValueComponent.displayName = "DefaultPropValueComponent";
303303
// @ts-ignore
304-
DefaultPropValueComponent.__docgenInfo = { \\"description\\": \\"Component with a prop with a default value.\\", \\"displayName\\": \\"DefaultPropValueComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": { value: \\"blue\\" }, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"enum\\", \\"value\\": [{ \\"value\\": \\"\\\\\\"blue\\\\\\"\\" }, { \\"value\\": \\"\\\\\\"green\\\\\\"\\" }] } }, \\"counter\\": { \\"defaultValue\\": { value: 123 }, \\"description\\": \\"Button counter.\\", \\"name\\": \\"counter\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } }, \\"disabled\\": { \\"defaultValue\\": { value: false }, \\"description\\": \\"Button disabled.\\", \\"name\\": \\"disabled\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"boolean\\" } }, \\"tabIndex\\": { \\"defaultValue\\": { value: -1 }, \\"description\\": \\"\\", \\"name\\": \\"tabIndex\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } } } };
304+
DefaultPropValueComponent.__docgenInfo = { "description": "Component with a prop with a default value.", "displayName": "DefaultPropValueComponent", "props": { "color": { "defaultValue": { value: "blue" }, "description": "Button color.", "name": "color", "required": true, "type": { "name": "enum", "value": [{ "value": "\\"blue\\"" }, { "value": "\\"green\\"" }] } }, "counter": { "defaultValue": { value: 123 }, "description": "Button counter.", "name": "counter", "required": false, "type": { "name": "number" } }, "disabled": { "defaultValue": { value: false }, "description": "Button disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": { value: -1 }, "description": "", "name": "tabIndex", "required": false, "type": { "name": "number" } } } };
305305
}
306306
catch (__react_docgen_typescript_loader_error) { }"
307307
`;

‎src/__tests__/plugin.test.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ function compile(config: Configuration): Promise<string> {
3434
);
3535
const memfs = compiler.outputFileSystem;
3636

37+
if (!memfs) {
38+
throw new Error("memfs is undefined");
39+
}
40+
3741
compiler.run((error, stats) => {
3842
if (error) {
3943
return reject(error);

0 commit comments

Comments
 (0)