Add sass example

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')

examples/sass-and-ts/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-sass-and-ts",
+  "description": "Testing components written in TypeScript with Sass imports",
+  "private": true,
+  "scripts": {
+    "test": "../../node_modules/.bin/cypress run",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}

examples/sass-and-ts/src/App.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import App from './App.tsx'
+
+describe('Sass and TS App', () => {
+  it('has style', () => {
+    mount(<App />)
+    cy.get('.App').should('have.css', 'text-align', 'center')
+  })
+})

examples/sass-and-ts/src/App.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import './styles.scss'
+
+export default function App() {
+  return (
+    <div className="App">
+      <h1>Hello React</h1>
+      <h2>This TS component imports Scss styles</h2>
+    </div>
+  )
+}

examples/sass-and-ts/src/styles.scss

@@ -0,0 +1,4 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}

examples/sass-and-ts/webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path')
+module.exports = {
+  resolve: {
+    // for this example, let's point 'cypress-react-unit-test' at the root
+    alias: {
+      'cypress-react-unit-test': path.resolve('../..'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+          plugins: ['@babel/plugin-proposal-class-properties'],
+        },
+      },
+      {
+        test: /\.scss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+    ],
+  },
+}

examples/tailwind/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/using-babel/cypress/plugins/index.js

@@ -1,5 +1,6 @@
 // let's bundle spec files and the components they include using
 // the same bundling settings as the project by loading .babelrc
+// https://github.com/bahmutov/cypress-react-unit-test#install
 const preprocessor = require('cypress-react-unit-test/plugins/babelrc')
 module.exports = (on, config) => {
   preprocessor(on, config)

examples/visual-sudoku/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')
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 

examples/visual-testing-with-applitools/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/visual-testing-with-happo/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')
 const happoTask = require('happo-cypress/task')
 

examples/visual-testing-with-percy/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 percyHealthCheck = require('@percy/cypress/task')
 const preprocessor = require('../../../../plugins/react-scripts')
 module.exports = (on, config) => {