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-propertiesAnd 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.alertcalls 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