Add sass example (#248)

Author: bahmutov

README.md

@@ -161,6 +161,7 @@ Folder Name | Description
 [react-scripts](examples/react-scripts) | A project using `react-scripts` with component tests in `src` folder
 [react-scripts-folder](examples/react-scripts-folder) | A project using `react-scripts` with component tests in `cypress/component`
 [tailwind](examples/tailwind) | Testing styles built using [Tailwind CSS](https://tailwindcss.com/)
+[sass-and-ts](examples/sass-and-ts) | Example with Webpack, Sass and TypeScript
 [visual-sudoku](examples/visual-sudoku) | [Visual testing](#visual-testing) for components using open source plugin [cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot). For larger example with an hour long list of explanation videos, see [bahmutov/sudoku](https://github.com/bahmutov/sudoku).
 [visual-testing-with-percy](examples/visual-testing-with-percy) | [Visual testing](#visual-testing) for components using 3rd party service [Percy.io](https://percy.io/)
 [visual-testing-with-happo](examples/visual-testing-with-happo) | [Visual testing](#visual-testing) for components using 3rd party service [Happo](https://happo.io/)
@@ -278,6 +279,8 @@ When using Node Sass styles, tell Cypress to use [the system NodeJS](https://on.
 }
 ```
 
+Find full example in [sass-and-ts](examples/sass-and-ts) folder.
+
 </details>
 
 <details id="speed">

circle.yml

@@ -95,6 +95,21 @@ workflows:
           command: npm test
           store_artifacts: true
 
+      - cypress/run:
+          name: Example Sass
+          requires:
+            - Install
+          # we need the same OS version as in install job
+          # because we will use native Sass dependency
+          executor: cypress/base-12
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/sass-and-ts
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Visual Sudoku
           executor: cypress/base-12
@@ -187,6 +202,7 @@ workflows:
           requires:
             - Install
             - Test
+            - Example Sass
             - Example Babel
             - Example React Scripts
             - Example Component Folder

examples/react-scripts-folder/cypress/plugins/index.js

@@ -1,3 +1,5 @@
+// load file preprocessor that comes with this plugin
+// https://github.com/bahmutov/cypress-react-unit-test#install
 const preprocessor = require('../../../../plugins/react-scripts')
 module.exports = (on, config) => {
   preprocessor(on, config)

examples/react-scripts/cypress/plugins/index.js

@@ -1,3 +1,5 @@
+// load file preprocessor that comes with this plugin
+// https://github.com/bahmutov/cypress-react-unit-test#install
 const preprocessor = require('../../../../plugins/react-scripts')
 module.exports = (on, config) => {
   preprocessor(on, config)

examples/sass-and-ts/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/sass-and-ts/README.md

@@ -0,0 +1,21 @@
+# example-sass-and-ts
+
+> Testing components written in TypeScript with Sass imports
+
+![Sass test](images/sass.png)
+
+To run, need to install link first
+
+```
+npm install
+```
+
+Note that Node Sass is a binary dependency, thus we need to run it using the same system version of Node as we installed. See [cypress.json](cypress.json) file.
+
+```json
+{
+  "nodeVersion": "system"
+}
+```
+
+To bundle code using the same [webpack.config.js](webpack.config.js) file, we point at it from [cypress/plugins/index.js](cypress/plugins/index.js) file.

examples/sass-and-ts/cypress.json

@@ -0,0 +1,12 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*spec.*",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true,
+  "componentFolder": "src",
+  "nodeVersion": "system",
+  "env": {
+    "coverage": false
+  }
+}

examples/sass-and-ts/cypress/integration/cy-spec.js

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})

examples/sass-and-ts/cypress/plugins/index.js

@@ -0,0 +1,11 @@
+// load Webpack file preprocessor that comes with this plugin
+// https://github.com/bahmutov/cypress-react-unit-test#install
+const preprocessor = require('cypress-react-unit-test/plugins/load-webpack')
+module.exports = (on, config) => {
+  // point at the webpack config file at the root of the project
+  config.env.webpackFilename = 'webpack.config.js'
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/sass-and-ts/cypress/support/index.js

@@ -0,0 +1 @@
+require('cypress-react-unit-test/support')