A little helper to unit test React components in the open source Cypress.io E2E test runner ALPHA

• What is this? This package allows you to use Cypress test runner to unit test your React components with zero effort.

• How is this different from Enzyme? It is similar in functionality BUT runs the component in the real browser with full power of Cypress E2E test runner: live GUI, full API, screen recording, CI support, cross-platform.

• some DOM events are not working when running all tests at once #4
• cannot mock server XHR for injected components #5
• cannot spy on window.alert #6

Requires Node version 6 or above.

npm install --save-dev cypress cypress-react-unit-test

// import the component you want to test import { HelloState } from '../../src/hello-x.jsx' import React from 'react' import { mount } from 'cypress-react-unit-test' describe('HelloState component', () => { it('works', () => { // mount the component under test 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' }) // check if GUI has rerendered cy.contains('Hello React!') }) })

How can we use features that require transpilation? Using @cypress/webpack-preprocessor. You can use cypress/plugins/index.js to configure any transpilation plugins you need.

For example, to enable class properties:

// cypress/plugins/index.js const webpack = require('@cypress/webpack-preprocessor') const webpackOptions = { module: { rules: [ { test: /\.(js|jsx|mjs)$/, loader: 'babel-loader', options: { presets: ['env', 'react'], plugins: ['transform-class-properties'], }, } ] } } const options = { // send in the options from your webpack.config.js, so it works the same // as your app's code webpackOptions, watchOptions: {} } module.exports = on => { on('file:preprocessor', webpack(options)) }

Install dev dependencies

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

And write a component using class properties

import React from 'react' export class Transpiled extends React.Component { state = { count: 0 } // ... }

All components are in src folder. All tests are in cypress/integration folder.

• hello-world-spec.js - testing the simplest React component from hello-world.jsx
• hello-x-spec.js - testing React component with props and state hello-x.jsx
• counter-spec.js clicks on the component and confirms the result
• stateless-spec.js shows testing a stateless component from stateless.jsx
• transpiled-spec.js shows testing a component with class properties syntax from transpiled.jsx
• users-spec.js shows how to observe XHR requests, mock server responses for component users.jsx
• alert-spec.js shows how to spy on window.alert calls from your component stateless-alert.jsx

• bahmutov/calculator tests multiple components: calculator App, Button, Display.

Same feature for unit testing components from other framesworks using Cypress

• cypress-vue-unit-test for Vue.js
• cypress-hyperapp-unit-test for Hyperapp
• cypress-svelte-unit-test for Svelte.js