feat: allow passing just cssFile path to inject style

Author: bahmutov

README.md

@@ -104,6 +104,15 @@ cy.readFile('cypress/integration/Button.css')
   })
 ```
 
+You can even let Cypress read the file and inject the style
+
+```js
+const cssFile = 'cypress/integration/Button.css'
+cy.mount(<Button name='Orange' orange />, null, { cssFile })
+```
+
+See [cypress/integration/inject-style-spec.js](cypress/integration/inject-style-spec.js) for more examples.
+
 ## Configuration
 
 If your React and React DOM libraries are installed in non-standard paths (think monorepo scenario), you can tell this plugin where to find them. In `cypress.json` specify paths like this:

cypress/integration/inject-style-spec.js

@@ -1,4 +1,5 @@
-/// <reference types="cypress" />
+// <reference types="cypress" />
+/// <reference types="../../lib" />
 import React from 'react'
 
 class Button extends React.Component {
@@ -52,6 +53,13 @@ describe('Injecting style', () => {
       .should('have.css', 'background-color', 'rgb(245, 146, 62)')
   })
 
+  it('can be read automatically', () => {
+    const cssFile = 'cypress/integration/Button.css'
+    cy.mount(<Button name='Orange' orange />, null, { cssFile })
+    cy.get('.orange button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+  })
+
   context('read CSS file once', () => {
     before(() => {
       // .as('style') will save the loaded CSS text

lib/index.d.ts

@@ -24,8 +24,20 @@ interface JSXElement {
   props: object
 }
 
+type filepath = string
+
 interface MountOptions {
+  /**
+   * CSS string to inject as a style element
+   * before mounting the component.
+   */
   style: string
+  /**
+   * Read CSS file from the given path
+   * and inject it as a style tag
+   * before mounting the component
+   */
+  cssFile: filepath
 }
 
 declare namespace Cypress {

lib/index.ts

@@ -88,11 +88,25 @@ Cypress.Commands.add('copyComponentStyles', component => {
 })
 
 const injectStyle = (options?: Partial<MountOptions>) => (w: Window) => {
-  if (options && options.style) {
+  // IMPORTANT: return window reference for other callbacks to inject
+  // more things
+  if (!options) {
+    return w
+  }
+  if (options.style) {
     const style = w.document.createElement('style')
     style.appendChild(document.createTextNode(options.style))
     w.document.body.appendChild(style)
+  }
+  if (options.cssFile) {
+    return cy.readFile(options.cssFile).then(css => {
+      const style = w.document.createElement('style')
+      style.appendChild(document.createTextNode(css))
+      w.document.body.appendChild(style)
+      return w
+    })
  }
+ return w
 }
 
 /**