Socket
Socket
Sign inDemoInstall

cypress-react-unit-test

Package Overview
Dependencies
0
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.1 to 2.0.0

61

dist/index.js

@@ -5,35 +5,4 @@ "use strict";

// and "losing" styles when the next test starts
var stylesCache = new Map();
var copyStyles = function (component) {
// need to find same component when component is recompiled
// by the JSX preprocessor. Thus have to use something else,
// like component name
var hash = component.type.name;
var styles = document.querySelectorAll('head style');
if (styles.length) {
console.log('injected %d styles', styles.length);
stylesCache.set(hash, styles);
}
else {
console.log('No styles injected for this component, checking cache');
if (stylesCache.has(hash)) {
styles = stylesCache.get(hash);
}
else {
styles = null;
}
}
if (!styles) {
return;
}
var parentDocument = window.parent.document;
var projectName = Cypress.config('projectName');
var appIframeId = "Your App: '" + projectName + "'";
var appIframe = parentDocument.getElementById(appIframeId);
var head = appIframe.contentDocument.querySelector('head');
styles.forEach(function (style) {
head.appendChild(style);
});
};
function setXMLHttpRequest(w) {
exports.stylesCache = new Map();
exports.setXMLHttpRequest = function (w) {
// by grabbing the XMLHttpRequest from app's iframe

@@ -44,28 +13,6 @@ // and putting it here - in the test iframe

return w;
}
function setAlert(w) {
};
exports.setAlert = function (w) {
window.alert = w.alert;
return w;
}
/* eslint-env mocha */
exports.mount = function (jsx) {
// include React and ReactDOM from CDN to force DOM to register all DOM event listeners
// otherwise the component will NOT be able to dispatch any events
// when it runs the second time
// https://github.com/bahmutov/cypress-react-unit-test/issues/3
var html = "<body>\n <div id=\"app\"></div>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js\"></script>\n </body>";
var document = cy.state('document');
document.write(html);
document.close();
cy.window({ log: false })
.then(setXMLHttpRequest)
.then(setAlert)
.its('ReactDOM.render')
.then(function (render) {
Cypress._component = render(jsx, document.getElementById('app'));
Cypress.component = function () {
return cy.then(function () { return Cypress._component; });
};
});
copyStyles(jsx);
};

68

lib/index.js
// having weak reference to styles prevents garbage collection
// and "losing" styles when the next test starts
const stylesCache = new Map()
export const stylesCache = new Map()
const copyStyles = component => {
// need to find same component when component is recompiled
// by the JSX preprocessor. Thus have to use something else,
// like component name
const hash = component.type.name
let styles = document.querySelectorAll('head style')
if (styles.length) {
console.log('injected %d styles', styles.length)
stylesCache.set(hash, styles)
} else {
console.log('No styles injected for this component, checking cache')
if (stylesCache.has(hash)) {
styles = stylesCache.get(hash)
} else {
styles = null
}
}
if (!styles) {
return
}
const parentDocument = window.parent.document
const projectName = Cypress.config('projectName')
const appIframeId = `Your App: '${projectName}'`
const appIframe = parentDocument.getElementById(appIframeId)
const head = appIframe.contentDocument.querySelector('head')
styles.forEach(style => {
head.appendChild(style)
})
}
function setXMLHttpRequest (w) {
export const setXMLHttpRequest = (w) => {
// by grabbing the XMLHttpRequest from app's iframe

@@ -46,34 +13,5 @@ // and putting it here - in the test iframe

function setAlert (w) {
export const setAlert = (w) => {
window.alert = w.alert
return w
}
/* eslint-env mocha */
export const mount = jsx => {
// include React and ReactDOM from CDN to force DOM to register all DOM event listeners
// otherwise the component will NOT be able to dispatch any events
// when it runs the second time
// https://github.com/bahmutov/cypress-react-unit-test/issues/3
const html = `<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
</body>`
const document = cy.state('document')
document.write(html)
document.close()
cy.window({log: false})
.then(setXMLHttpRequest)
.then(setAlert)
.its('ReactDOM.render')
.then(render => {
Cypress._component = render(jsx, document.getElementById('app'))
Cypress.component = () =>
cy.then(() => Cypress._component)
})
copyStyles(jsx)
}

34

package.json
{
"name": "cypress-react-unit-test",
"version": "1.2.1",
"version": "2.0.0",
"description": "Unit test React components using Cypress",

@@ -30,18 +30,18 @@ "main": "dist",

"devDependencies": {
"@cypress/webpack-preprocessor": "^1.1.2",
"@types/node": "^8.5.2",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"cypress": "^1.4.1",
"github-post-release": "^1.13.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"semantic-action": "^1.1.0",
"standard": "^10.0.3",
"typescript": "^2.6.2",
"webpack": "^3.10.0"
"@babel/core": "7.2.2",
"@babel/plugin-proposal-class-properties": "7.3.0",
"@babel/preset-env": "7.3.1",
"@babel/preset-react": "7.0.0",
"@cypress/webpack-preprocessor": "1.1.3",
"@types/node": "9.6.22",
"axios": "0.18.0",
"babel-loader": "8.0.5",
"cypress": "3.1.4",
"github-post-release": "1.13.1",
"react": "16.6.3",
"react-dom": "16.6.3",
"semantic-action": "1.1.6",
"standard": "11.0.1",
"typescript": "2.9.2",
"webpack": "4.13.0"
},

@@ -48,0 +48,0 @@ "standard": {

37

README.md

@@ -1,2 +0,2 @@

# cypress-react-unit-test [![Build Status](https://travis-ci.org/bahmutov/cypress-react-unit-test.svg?branch=master)](https://travis-ci.org/bahmutov/cypress-react-unit-test) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah)
# cypress-react-unit-test [![Build Status](https://travis-ci.org/bahmutov/cypress-react-unit-test.svg?branch=master)](https://travis-ci.org/bahmutov/cypress-react-unit-test) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app]

@@ -31,14 +31,14 @@ > A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **ALPHA**

import React from 'react'
import { mount } from 'cypress-react-unit-test'
describe('HelloState component', () => {
it('works', () => {
// mount the component under test
mount(<HelloState />)
cy.mount(<HelloState />)
// start testing!
cy.contains('Hello Spider-man!')
// mounted component is returned from Cypress.component()
Cypress.component().invoke('setState', {name: 'React'})
Cypress.component().its('state').should('deep.equal', {
name: 'React'
})
// mounted component is aliased as @Component
cy.get('@Component')
.invoke('setState', { name: 'React' })
cy.get('@Component')
.its('state')
.should('deep.equal', { name: 'React' })
// check if GUI has rerendered

@@ -68,4 +68,4 @@ cy.contains('Hello React!')

options: {
presets: ['env', 'react'],
plugins: ['transform-class-properties'],
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},

@@ -93,4 +93,4 @@ }

npm i -D @cypress/webpack-preprocessor \
babel-loader babel-preset-es2015 babel-preset-react \
babel-plugin-transform-class-properties
babel-loader @babel/preset-env @babel/preset-react \
@babel/plugin-proposal-class-properties
```

@@ -121,2 +121,3 @@

* [transpiled-spec.js](cypress/integration/stateless-spec.js) shows testing a component with class properties syntax from [transpiled.jsx](src/stateless.jsx)
* [error-boundary-spec.js](cypress/integration/error-boundary-spec.js) shows testing a component acting as an error boundary from [error-boundary.jsx](src/error-boundary.jsx)
* [users-spec.js](cypress/integration/users-spec.js) shows how to observe XHR requests, mock server responses for component [users.jsx](src/users.jsx)

@@ -133,4 +134,10 @@ * [alert-spec.js](cypress/integration/alert-spec.js) shows how to spy on `window.alert` calls from your component [stateless-alert.jsx](src/stateless-alert.jsx)

* [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test) for Vue.js
* [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test) for Hyperapp
* [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test) for Svelte.js
* [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test)
* [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)
* [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)
* [cypress-angular-unit-test](https://github.com/bahmutov/cypress-angular-unit-test)
* [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)
* [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc