Add tests to kitchensink test suite

Author: hbj

packages/react-scripts/fixtures/kitchensink/template.json

@@ -3,6 +3,7 @@
     "dependencies": {
       "bootstrap": "4.3.1",
       "jest": "26.6.0",
+      "less": "4.x",
       "node-sass": "4.x",
       "normalize.css": "7.0.0",
       "prop-types": "15.7.2",

packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js

@@ -82,6 +82,19 @@ describe('Integration', () => {
       ]);
     });
 
+    it('less inclusion', async () => {
+      doc = await initDOM('less-inclusion');
+      matchCSS(doc, [/#feature-less-inclusion\{background:.+;color:.+}/]);
+    });
+
+    it('less modules inclusion', async () => {
+      doc = await initDOM('less-modules-inclusion');
+      matchCSS(doc, [
+        /.+less-styles_lessModulesInclusion.+\{background:.+;color:.+}/,
+        /.+assets_lessModulesIndexInclusion.+\{background:.+;color:.+}/,
+      ]);
+    });
+
     it('image inclusion', async () => {
       doc = await initDOM('image-inclusion');
 

packages/react-scripts/fixtures/kitchensink/template/src/App.js

@@ -126,6 +126,16 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
+      case 'less-inclusion':
+        import('./features/webpack/LessInclusion').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
+      case 'less-modules-inclusion':
+        import('./features/webpack/LessModulesInclusion').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
       case 'custom-interpolation':
         import('./features/syntax/CustomInterpolation').then(f =>
           this.setFeature(f.default)

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/LessInclusion.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import './assets/less-styles.less';
+
+const LessInclusion = () => (
+  <p id="feature-less-inclusion">We love useless text.</p>
+);
+
+export default LessInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/LessInclusion.test.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import LessInclusion from './LessInclusion';
+
+describe('less inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<LessInclusion />, div);
+  });
+});

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/LessModulesInclusion.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import styles from './assets/less-styles.module.less';
+import indexStyles from './assets/index.module.less';
+
+const LessModulesInclusion = () => (
+  <div>
+    <p className={styles.lessModulesInclusion}>LESS Modules are working!</p>
+    <p className={indexStyles.lessModulesIndexInclusion}>
+      LESS Modules with index are working!
+    </p>
+  </div>
+);
+
+export default LessModulesInclusion;

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/LessModulesInclusion.test.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import LessModulesInclusion from './LessModulesInclusion';
+
+describe('less modules inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<LessModulesInclusion />, div);
+  });
+});

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/index.module.less

@@ -0,0 +1,4 @@
+.lessModulesIndexInclusion {
+  background: darkblue;
+  color: lightblue;
+}

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/less-styles.less

@@ -0,0 +1,4 @@
+#feature-less-inclusion {
+  background: ghostwhite;
+  color: crimson;
+}

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/less-styles.module.less

@@ -0,0 +1,4 @@
+.lessModulesInclusion {
+  background: darkblue;
+  color: lightblue;
+}