Improve mocking if source does not contain any jsx expression

asvetliakov · asvetliakov · commit 1fb6cf1becd4 · 2018-06-03T06:15:37.000+02:00
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-## Easy automock your react components
+## Easy automock your external react components
 
-Do you like write component tests? Do you like react-test-renderer more than shallow renderer? Do you feel sometimes that it would be great to combine both shallow renderer and react-test-renderer to prevent rendering inner components? Do you feel headcache when writing tests for something like [styled-components](https://www.styled-components.com/) ?
+Do you like write component tests? Do you like react-test-renderer more than shallow renderer? Do you feel sometimes that it would be great to combine both shallow renderer and react-test-renderer to prevent rendering inner components? Do you feel headcache when writing tests for something like [styled-components](https://www.styled-components.com/) ? Are you bored to write numerous ```jest.mock()``` calls to mock your component?
 
-If answer for these all questions is "Yes" then you come to the right place.
+If the answer for any of these questions is "Yes" then you come to the right place.
 
 
 Much often, you want to mock/don't render external components. Almost always these external components are being imported through import statement ```import A from "./a"```. And very often you want to full render the inner (helpers or styled) components:
@@ -90,15 +90,22 @@ Ideally, you want this snapshot:
 
 ```
 
-This is achievable by mocking components using ```jest.mock()``` but this is boring and repetetive task, especially when you have to mock many components.
+This is achievable by mocking components using ```jest.mock()``` but this is boring and repetetive task, especially when you have to mock many components:
+
+```jsx
+    jest.mock("../AnotherComp", () => "AnotherComp");
+    jest.mock("../Button", () => "Button");
+    jest.mock("../SomeComp", () => ({ SomeComp: "SomeComp" })); // very ugly for named exports
+    // etc...
+```
 
 Finally, now you can just use ```jest-mock-external-components```:
 
-```js
+```jsx
 import Component from "../mycomponent";
 import { mockExternalComponents } from "jest-mock-external-components";
 mockExteralComponents(Component);
-// will mock <Button /> and <AnotherComp />
+// will automatically mock <Button /> and <AnotherComp />
 
 // Use react-test-renderer
 const t = create(<Component />);
@@ -122,4 +129,4 @@ Add to your ```.babelrc``` / ```.babelrc.js``` / ```babel.config.js```
 ```
 
 ## Caveats
-After mocking, at beginning of the test file the ```jest.resetModules()``` will be called. Make sure you won't set internal state somewhere before (for example in setupFiles/setupTestFrameworkFile)
+After mocking, at beginning of the test file the ```jest.resetModules()``` will be called. Make sure you are not setting internal state somewhere before (for example in setupFiles/setupTestFrameworkFile)
diff --git a/src/__tests__/__snapshots__/babel.spec.ts.snap b/src/__tests__/__snapshots__/babel.spec.ts.snap
@@ -1023,6 +1023,188 @@ const Mocks = [{
 exports.Mocks = Mocks;"
 `;
 
+exports[`For component like source Works for alwaysMockIdentifiers without JSX opening element 1`] = `
+"import A from \\"a\\";
+import { B } from \\"../b\\";
+import C from \\"c\\";
+import D from \\"d\\";
+import styled from \\"styled\\";
+const StyledA = styled(A)\`\`;
+const StyledB = styled(A.B);
+const StyledC = styled(A.C, {});
+const StyledD = styled(A.D, {})\`font-size: 8em;\`;
+const B1 = A.withComponent(C.C1);
+const B2 = styled(D)\`\`;
+const B3 = nonStyled(C.C2);
+export const Mocks = [{
+  identifier: \\"A\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.B\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.C\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.D\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"C.C1\\",
+  path: \\"c\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"D\\",
+  path: \\"d\\",
+  type: \\"default\\"
+}];"
+`;
+
+exports[`For component like source Works for alwaysMockIdentifiers without JSX opening element 2`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.Mocks = void 0;
+
+var _a = _interopRequireDefault(require(\\"a\\"));
+
+var _b = require(\\"../b\\");
+
+var _c = _interopRequireDefault(require(\\"c\\"));
+
+var _d = _interopRequireDefault(require(\\"d\\"));
+
+var _styled = _interopRequireDefault(require(\\"styled\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledA =
+/*#__PURE__*/
+(0, _styled.default)(_a.default, {
+  target: \\"e1h80wsp0\\"
+})();
+const StyledB = (0, _styled.default)(_a.default.B);
+const StyledC = (0, _styled.default)(_a.default.C, {});
+const StyledD =
+/*#__PURE__*/
+(0, _styled.default)(_a.default.D, {
+  target: \\"e1h80wsp1\\"
+})(\\"font-size:8em;\\");
+
+const B1 = _a.default.withComponent(_c.default.C1, {
+  target: \\"e1h80wsp2\\"
+});
+
+const B2 =
+/*#__PURE__*/
+(0, _styled.default)(_d.default, {
+  target: \\"e1h80wsp3\\"
+})();
+const B3 = nonStyled(_c.default.C2);
+const Mocks = [{
+  identifier: \\"A\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.B\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.C\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.D\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"C.C1\\",
+  path: \\"c\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"D\\",
+  path: \\"d\\",
+  type: \\"default\\"
+}];
+exports.Mocks = Mocks;"
+`;
+
+exports[`For component like source Works for alwaysMockIdentifiers without JSX opening element 3`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.Mocks = void 0;
+
+var _a = _interopRequireDefault(require(\\"a\\"));
+
+var _b = require(\\"../b\\");
+
+var _c = _interopRequireDefault(require(\\"c\\"));
+
+var _d = _interopRequireDefault(require(\\"d\\"));
+
+var _styled = _interopRequireDefault(require(\\"styled\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var StyledA =
+/*#__PURE__*/
+(0, _styled.default)(_a.default, {
+  target: \\"e1h80wsp0\\"
+})();
+var StyledB = (0, _styled.default)(_a.default.B);
+var StyledC = (0, _styled.default)(_a.default.C, {});
+var StyledD =
+/*#__PURE__*/
+(0, _styled.default)(_a.default.D, {
+  target: \\"e1h80wsp1\\"
+})(\\"font-size:8em;\\");
+
+var B1 = _a.default.withComponent(_c.default.C1, {
+  target: \\"e1h80wsp2\\"
+});
+
+var B2 =
+/*#__PURE__*/
+(0, _styled.default)(_d.default, {
+  target: \\"e1h80wsp3\\"
+})();
+var B3 = nonStyled(_c.default.C2);
+const Mocks = [{
+  identifier: \\"A\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.B\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.C\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"A.D\\",
+  path: \\"a\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"C.C1\\",
+  path: \\"c\\",
+  type: \\"default\\"
+}, {
+  identifier: \\"D\\",
+  path: \\"d\\",
+  type: \\"default\\"
+}];
+exports.Mocks = Mocks;"
+`;
+
 exports[`For component like source Works for member expression without HOC 1`] = `
 "import A from \\"a\\";
 import * as B from \\"b\\";
diff --git a/src/__tests__/babel.spec.ts b/src/__tests__/babel.spec.ts
@@ -556,6 +556,50 @@ describe("For component like source", () => {
 
         expect(transform(source, { babelrc: false, plugins: [plugin], presets: ["@babel/react"] }).code).toMatchSnapshot();
     });
+
+    it("Works for alwaysMockIdentifiers without JSX opening element", () => {
+        const source = `
+        import A from "a";
+        import { B } from "../b";
+        import C from "c";
+        import D from "d";
+        import styled from "styled";
+
+        const StyledA = styled(A)\`\`;
+        const StyledB = styled(A.B);
+        const StyledC = styled(A.C, {});
+        const StyledD = styled(A.D, {})\`font-size: 8em;\`;
+
+        const B1 = A.withComponent(C.C1);
+        const B2 = styled(D) \`\`;
+
+        const B3 = nonStyled(C.C2);
+        `;
+
+        expect(transform(source, { babelrc: false, plugins: [plugin], presets: ["@babel/react"] }).code).toMatchSnapshot();
+        expect(transform(source, { babelrc: false, plugins: ["@babel/transform-modules-commonjs", "emotion", plugin], presets: ["@babel/react"], filename: "test.jsx" }).code).toMatchSnapshot();
+        expect(transform(source, {
+            babelrc: false,
+            plugins: ["emotion", plugin],
+            presets: [
+                "@babel/react",
+                ["@babel/env", {
+                    targets: {
+                        browsers: [
+                            ">0.25%",
+                            "not dead",
+                            "ie 11",
+                            "not op_mini all"
+                        ],
+                    },
+                    // loose: true,
+                    modules: "commonjs",
+                    useBuiltIns: "usage",
+                }]
+            ],
+            filename: "test.jsx"
+        }).code).toMatchSnapshot();
+    })
 });
 
 describe("For test like source", () => {
diff --git a/src/babel.ts b/src/babel.ts
