Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
cypress-react-unit-test
Advanced tools
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.
window.alert
#6Requires Node version 8 or above.
npm install --save-dev cypress cypress-react-unit-test
If you need help configuring bundler, see preprocessors info
Include this plugin from cypress/support/index.js
import 'cypress-react-unit-test'
This adds a new command cy.mount
that can mount a React component. It also overloads cy.get
to accept in addition to selectors React component, returning it. See examples below.
// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import { HelloState } from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => {
it('works', () => {
// mount the component under test
cy.mount(<HelloState />)
// start testing!
cy.contains('Hello Spider-man!')
// mounted component can be selected via its name, function, or JSX
// e.g. '@HelloState', HelloState, or <HelloState />
cy.get(HelloState)
.invoke('setState', { name: 'React' })
cy.get(HelloState)
.its('state')
.should('deep.equal', { name: 'React' })
// check if GUI has rerendered
cy.contains('Hello React!')
})
})
You can add individual style to the mounted component by passing its text as an option
it('can be passed as an option', () => {
const style = `
.component-button {
display: inline-flex;
width: 25%;
flex: 1 0 auto;
}
.component-button.orange button {
background-color: #F5923E;
color: white;
}
`
cy.mount(<Button name='Orange' orange />, { style })
cy.get('.orange button')
.should('have.css', 'background-color', 'rgb(245, 146, 62)')
})
Often your component rely on global CSS style imported from the root index.js
or app.js
file
// index.js
import './styles.css'
// bootstrap application
You can read the CSS file and pass it as style
option yourself
cy.readFile('cypress/integration/Button.css')
.then(style => {
cy.mount(<Button name='Orange' orange />, { style })
})
You can even let Cypress read the file and inject the style
const cssFile = 'cypress/integration/Button.css'
cy.mount(<Button name='Orange' orange />, { cssFile })
See cypress/integration/inject-style-spec.js for more examples.
Sometimes you need to re-render the component, for example when a Redux store changes. After cy.mount
completes (asynchronously), you can call cy.render(JSXElement)
method.
cy.mount(<El text='first' />)
cy.contains('first')
.then(() => {
cy.render(<El text='second' />)
})
See bahmutov/redux-counter-example example spec file App.cy-spec.js.
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:
{
"env": {
"cypress-react-unit-test": {
"react": "node_modules/react/umd/react.development.js",
"react-dom": "node_modules/react-dom/umd/react-dom.development.js"
}
}
}
How can we use features that require transpilation? By using @cypress/webpack-preprocessor - see the plugin configuration in cypress/plugins/index.js
If you are using plugins/cra-v3 it instruments the code on the fly using babel-plugin-istanbul
. If you want to disable the instrumentation, use --env coverage=false
or CYPRESS_coverage=false
or set in your cypress.json
file
{
"env": {
"coverage": false
}
}
Works really well with coverage reporting done by plugin cypress-io/code-coverage.
If you are using Create-React-App v3 or react-scripts
, and want to reuse the built in webpack before ejecting, this module ships with Cypress preprocessor in plugins folder. From the cypress.json
point at the shipped plugin in the node_modules
.
{
"pluginsFile": "node_modules/cypress-react-unit-test/plugins/cra-v3",
"supportFile": "node_modules/cypress-react-unit-test/support"
}
See example repo bahmutov/try-cra-with-unit-test
If you already have a plugins file, you can use a file preprocessor that points at CRA's webpack
// your project's Cypress plugin file
const craFilePreprocessor = require('cypress-react-unit-test/plugins/cra-v3/file-preprocessor')
module.exports = on => {
on('file:preprocessor', craFilePreprocessor())
}
Bonus: re-using the config means if you create your application using create-react-app --typescript
, then TypeScript transpile just works out of the box. See bahmutov/try-cra-app-typescript.
All components are in src folder. All tests are in cypress/integration folder.
window.alert
calls from your component stateless-alert.jsxTo get started with this repo, compile the plugin's code and the examples code
npm run transpile
npm run build
npm run cy:open
npx tsc -w
npx cypress open
and select the spec you want to work withlib/index.ts
where all the magic happensUses Percy.io visual diffing service as a GitHub pull request check.
Same feature for unit testing components from other frameworks using Cypress
FAQs
Unit test React components using Cypress
The npm package cypress-react-unit-test receives a total of 1,586 weekly downloads. As such, cypress-react-unit-test popularity was classified as popular.
We found that cypress-react-unit-test demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.