Unit test React components using Cypress
Home Page: https://glebbahmutov.com/blog/my-vision-for-component-tests/
Testing React Components with Cypress
cypress-react-unit-test has been renamed to @cypress/react and now lives in the main Cypress monorepoTo keep up to date with the latest versions, change edit your package.json to use @cypress/react instead of cypress-react-unit-test.
# npm
npm install @cypress/react
# yarn
yarn add @cypress/react
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
Tried to recreate the describe('HelloState component') example in the readme and I get Cypress.component is not a function. Any ideas why this might be? "cypress-react-unit-test": "^1.2.1" and "cypress": "^2.1.0"
Hello,
I have been trying to setup this up with typescript but unfortunately I haven't been able to figure it out. Every time I get this error. Any help would be greatly appreciated. I have spent two full days on this.
You can answer on stack-overflow and get the bounty :)
https://stackoverflow.com/questions/55734312/configuring-cypress-cypress-react-unit-test-and-react
./node_modules/cypress-react-unit-test/lib/getDisplayName.ts 3:24
Module parse failed: Unexpected token (3:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /// <reference path="./index.d.ts" />
|
> const cachedDisplayNames: WeakMap<JSX, string> = new WeakMap();
|
| /**
@ ./node_modules/cypress-react-unit-test/lib/index.ts 3:0-46 111:22-36 171:26-40
@ ./cypress/support/index.ts
tsconfig
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": false,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"types": ["cypress"]
}
}
webpack
const path = require('path')
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
Hi,
this is probably due to how cypress is taking control over the about:blank page. However, if a component is using styled-components or emotionJS, the class names are generated. However the generated styles are not applied to the page.
Here's the Weekly Digest for bahmutov/cypress-react-unit-test:
Last week, no issues were created.
Last week, 1 pull request was created, updated or merged.
Last week, 1 pull request was updated.
💛 #108 Adopt cypress mount mode, by dmtrKovalenko
Last week there were no commits.
Last week there were no contributors.
Last week there were 5 stagazers.
⭐ frederickfogerty
⭐ SpencerDuball
⭐ TchernyavskyDaniil
⭐ FjVillar
⭐ adaniliuk
You all are the stars! 🌟
Last week there were no releases.
That's all for last week, please 👀 Watch and ⭐ Star the repository bahmutov/cypress-react-unit-test to receive next weekly updates. 😃
You can also view all Weekly Digests by clicking here.
Your Weekly Digest bot. 📆
Is there a working example of the cypress-react-unit-test testing React compontenst written in Typescript ?
Other react-bootstrap components render in the DOM and display in the Cypress headed Chrome instance. react-bootstrap modals do not.
Test
/// <reference types="Cypress" />
import React from 'react';
// import {ComposeMessage} from "../../../src/Terra/components/ComposeMessage";
import {Example} from "../../../src/Terra/components/TestComponent";
import { mount } from 'cypress-react-unit-test';
// const mount = require( 'cypress-react-unit-test' ).mount;
describe( "Mounting", () => {
it( 'works', () => {
mount( <Example/>)
} );
} );
Component
import React from 'react';
import ReactDom from 'react-dom';
import {Button, Modal, FormGroup, ControlLabel, FormControl} from 'react-bootstrap';
export class Example extends React.Component <any, any> {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: true
};
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}
render() {
return(
<div>
This text is all that renders. And the modal is not rendered, regardless of whether it is contained within this div.
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
ac consectetur ac, vestibulum at eros.
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
Just like for Vue - need to copy injected styles from test spec frame to app frame. Cache by component
Silently skips alerts https://docs.cypress.io/api/events/catalog-of-events.html#Window-Alert
I get this error when attempting to unit test a component that uses React.createRef to make a reference to the component. The error is thrown from render():
Value of this.textareaRef at render():
Source code of the relevant parts of MarkdownEditor:
import React from 'react';
export default class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.textareaRef = React.createRef();
}
render() {
console.log(this.textareaRef)
return (
<div>
<textarea ref={this.textareaRef} />
</div>
)
}
}Test code:
const MarkdownEditor = require('../../src/components/markdown/MarkdownEditor');
const { mount } = require('cypress-react-unit-test');
import React from 'react';
describe('Markdown Editor', () => {
it('works', () => {
mount(<MarkdownEditor/>)
})
})It works once I remove the ref= from the app code, but then again this component depends on having a working ref to itself.
Found a relevant SO that suggested this could be because of an out-of-date React: https://stackoverflow.com/questions/50299218/react-createref-causing-error-expected-ref-to-be-function-or-string
Hello!
I Would Like to know how can I configure cypress with the cypress-react-test-unit to run in the terminal like the "cypress run" command? So I can use in my C.I server(GitLab)
this is my cypress.json config file
{
"baseUrl": "http://127.0.0.1:3000",
"integrationFolder": "cypress/e2e",
"reporter": "junit",
"video": true,
"reporterOptions": {
"mochaFile": "cypress/results/test-development-output.xml",
"toConsole": true
}
}
Seriously behind - from v1 to v4!
/// <reference types="Cypress" />
import 'cypress-react-unit-test'
import { App } from '../../../../src/app';
describe('Additional Vehicles Page', () => {
beforeEach(() => {
// cy.mount(<App />)
cy.get(App)
.invoke('setState', { cypress: true })
cy.getToVehiclesPage();
})
^ Here above all I want cypress-react-unit-test to do is to set the internal state of a component before the tests run. However it throws this error immediately:
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
A missing file or dependency
A syntax error in the file or one of its dependencies
@import 'buttons';
^
ParseError: Unexpected character '@'
=====
Looks like it imports the App.jsx file, but when it gets to this line import './styles/app.scss'; it tries to process the CSS as javascript and breaks.
How have you guys overcome this problem?
Hi Gleb!
While running all specs I've noticed that the first spec with mounted component get all (and duplicated) CSS styles.
You can see that in your "calculator" example. Lets say it's unable to see orange button when you run tests in the row. To reproduce this clearly you can just rename button.spec.js to _button.spec.js so it will run first. As a result calculator.spec.js will lose all CSS and button really will be orange.
I've faced this issue at my work. Any advice?
I'm trying to load the styles from my scss file.
The button is rendered perfectly as component, however the styles are not added.
I am using co-location structure that loads the scss file directly into react components.
Structure:
button/
button.jsx
button.scss
button.test.js
React component:
import './_button.scss';
class Button extends React.Component ...
Test:
it('dark', () => {
cy.mount(<Button dark={true}/>);
cy.get('#button').should('have.class', `button--dark`);
});Although the button isn't dark :(
Packages:
Webpack config:
const webpackOptions = {
entry: './index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
use: ['file-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: ['url-loader?limit=100000']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
modules: [
path.resolve(__dirname, '..', 'src/'),
'node_modules',
],
},
plugins: [
new ExtractTextPlugin('main.css')
]
};
const webpack = require('@cypress/webpack-preprocessor');
module.exports = (on) => {
const options = {
webpackOptions: webpackOptions,
watchOptions: {},
};
on('file:preprocessor', webpack(options))
};Thanks!
Here's the Weekly Digest for bahmutov/cypress-react-unit-test:
Last week, no issues were created.
Last week, 1 pull request was created, updated or merged.
Last week, 1 pull request was updated.
💛 #44 chore(deps): update dependency @cypress/webpack-preprocessor to v4, by renovate[bot]
Last week there were no commits.
Last week there were no contributors.
Last week there were no stargazers.
Last week there were no releases.
That's all for last week, please 👀 Watch and ⭐ Star the repository bahmutov/cypress-react-unit-test to receive next weekly updates. 😃
You can also view all Weekly Digests by clicking here.
Your Weekly Digest bot. 📆
Here's the Weekly Digest for bahmutov/cypress-react-unit-test:
This week, 5 issues were created. Of these, 0 issues have been closed and 5 issues are still open.
💚 #137 Inject remote stylesheets, by bahmutov
💚 #136 Dynamic import keyword is not working (in this repo), by bahmutov
💚 #135 When adding globals to webpack config add test hook names, by bahmutov
💚 #134 Make work with ejected react scripts app, by bahmutov
💚 #108 Adopt cypress mount mode, by dmtrKovalenko
The issue most discussed this week has been:
🔈 #108 Adopt cypress mount mode, by dmtrKovalenko
It received 27 comments.
This week, no pull requests has been proposed by the users.
This week, 2 users have contributed to this repository.
They are bahmutov, and dmtrKovalenko.
This week, no user has starred this repository.
This week, there have been 2 commits in the repository.
These are:
🛠️ fix: the require format for react scripts task by bahmutov
🛠️ feat: use latest code coverage plugin by bahmutov
This week, 8 releases were published. These are:
🚀 v3.0.0-cypress-mount-mode.14 v3.0.0-cypress-mount-mode.14
🚀 v3.0.0-cypress-mount-mode.13 v3.0.0-cypress-mount-mode.13
🚀 v3.0.0-cypress-mount-mode.12 v3.0.0-cypress-mount-mode.12
🚀 v3.0.0-cypress-mount-mode.11 v3.0.0-cypress-mount-mode.11
🚀 v3.3.1 v3.3.1
🚀 v3.3.0 v3.3.0
🚀 v3.0.0-cypress-mount-mode.10 v3.0.0-cypress-mount-mode.10
🚀 v3.0.0-cypress-mount-mode.9 v3.0.0-cypress-mount-mode.9
That's all for this week, please watch 👀 and star ⭐ bahmutov/cypress-react-unit-test to receive next weekly updates. 😃
Hi All,
I am trying to assert on a connected react router component, and the assertion from cy.location('pathname') is failing. The same test passes if I use just plain cypress without mounting. Is this related to the proposed solution to #51, or is it something different entirely?
import React from "react";
import { ConnectedRouter, connectRouter, push, routerMiddleware } from 'connected-react-router'
import { createBrowserHistory } from "history";
import { connect, Provider } from "react-redux";
import { Redirect, Route, Switch } from 'react-router'
import { combineReducers, createStore, applyMiddleware } from "redux";
import fixScope from '../support/fixScope';
const history = createBrowserHistory()
const root = combineReducers({
router: connectRouter(history)
})
const store = createStore(root, applyMiddleware(
routerMiddleware(history)
))
const Redirecter = () => <Redirect to="/home" />
const Away = connect(
state => ({
path: state.router.location.pathname
}))(({ path }) => <h1>Away~ {path}</h1>)
const RoutedComponent = ({ match, path, onClick}) =>
<div>
<h1>Hello from {match.url} and {path}!</h1>
<button onClick={onClick}>Change Url</button>
</div>
const ConnectedRoutedComponent = connect(
state => ({
path: state.router.location.pathname
}),
dispatch => ({
onClick: () => dispatch(push('/away'))
}))(RoutedComponent)
describe('a routed component', () => {
beforeEach(() => {
fixScope(window)
})
it('should render', function() {
cy.server()
store.dispatch(push('/home'))
cy.mount(
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/away" component={Away} />
<Route path="/home" component={ConnectedRoutedComponent} />
<Route path="/" component={Redirecter}/>
</Switch>
</ConnectedRouter>
</Provider>
)
cy.get('button').click()
.then($ => {
// Passes
expect(store.getState().router.location.pathname).to.equal('/away')
// CypressError: Timed out retrying: expected '/__/' to equal '/away'
cy.location('pathname').should('eq', '/away')
})
})
})Problem
I get the following TypeScript error when i try to use the package in my code.
TypeScript error in /(hidden)/node_modules/cypress-react-unit-test/lib/getDisplayName.ts(27,8):
Variable 'displayName' is used before being assigned. TS2454
25 | }
26 |
> 27 | if (!displayName) {
| ^
28 | displayName = type.name || fallbackName
29 | }
30 |
It's coming from function getDisplayName()
let displayName: string
// The displayName property is not guaranteed to be a string.
// It's only safe to use for our purposes if it's a string.
// github.com/facebook/react-devtools/issues/803
if (typeof type.displayName === 'string') {
displayName = type.displayName
}
if (!displayName) {
displayName = type.name || fallbackName
}
Solution
I suggest displayName is initialised to fallbackName before the rest of the code happens.
let displayName: string = fallbackName
// The displayName property is not guaranteed to be a string.
// It's only safe to use for our purposes if it's a string.
// github.com/facebook/react-devtools/issues/803
if (typeof type.displayName === 'string') {
displayName = type.displayName
}
if (!displayName && type.name) {
displayName = type.name
}
@bahmutov Do you mind if submit a PR on this?
From https://reactjs.org/community/examples.html
The fork https://github.com/bahmutov/calculator with tests
To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:
.travis.ymlIf you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.
Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.
engines was only updated if it defined a single version, not a range..nvmrc was updated to Node.js 10.travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.
| Branch | Build failing 🚨 |
|---|---|
| Dependency | react-dom |
| Current Version | 16.2.0 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
react-dom is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
React.createRef() API as an ergonomic alternative to callback refs. (@trueadm in #12162)React.forwardRef() API to let components forward their refs to a child. (@bvaughn in #12346)React.Fragment. (@XaveScor in #11823)React.unstable_AsyncComponent with React.unstable_AsyncMode. (@acdlite in #12117)setState() on an unmounted component. (@sophiebits in #12347)getDerivedStateFromProps() lifecycle and UNSAFE_ aliases for the legacy lifecycles. (@bvaughn in #12028)getSnapshotBeforeUpdate() lifecycle. (@bvaughn in #12404)<React.StrictMode> wrapper to help prepare apps for async rendering. (@bvaughn in #12083)onLoad and onError events on the <link> tag. (@roderickhsiao in #11825)noModule boolean attribute on the <script> tag. (@aweary in #11900)onKeyPress in more browsers. (@nstraub in #10514)value and defaultValue to ignore Symbol values. (@nhunzaker in #11741)opera with a null value. @alisherdavronov in #11854)<option selected>. (@watadarkstar in #11821)ReactDOM.unstable_createPortal() in favor of ReactDOM.createPortal(). (@prometheansacrifice in #11747)React.Component. (@wyze in #11993)this.state of different components getting mixed up. (@sophiebits in #12323)toTree(). (@maciej-ka in #12107 and @gaearon in #12154)null for components that don't set it. (@jwbay in #11965)contextTypes. (@koba04 in #11922)ReactIs.isValidElementType() to help higher-order components validate their inputs. (@jamesreggio in #12483)react-reconciler/persistent for building renderers that use persistent data structures. (@gaearon in #12156)finalizeInitialChildren(). (@jquense in #11970)useSyncScheduling from the host config. (@acdlite in #11771)There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
If we are pointing at the react-scripts / CRA v3 WebPack config, find Babel and add Istanbul plugin following the example from https://github.com/cypress-io/instrument-cra
I am attempting to work my way through the sample scripts offered to understand this extension for my own unit testing project.
My problem is that I have encountered issues with cy.mount(). Encountered when copying hello-x to confirm my issues with cy.mount() stem from my own code rather than the extension.
When running the Hello-x-spec.js test I get the following errors.
I have read elsewhere that some had encountered errors with exporting when the class was not default, so I changed export class HelloX extends React.Component to export default class HelloX extends React.Component and get the following errors.
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
File: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid schedule: Invalid schedule: Failed to parse "every night"``
Hey, first of all: great module! It's very elevating to combine unit tests into the E2E workflow.
Anyway; we use styled-components heavily and I would like to unit test them in cypress. Unfortunately, mount throws a fit when hit with a styled component.
After
yarn add -D styled-componentsyarn add -D cypress-react-unit-test)If you throw this test into cypress...
// type definitions for Cypress object "cy"
/// <reference types="cypress" />
// check this file using TypeScript if available
// @ts-check
// =============================================================================
// Debugging Styled Component in Cypress for Unit Testing
// yarn add -D cypress-react-unit-test
// yarn add -D styled-components
// =============================================================================
import React from "react";
import { mount } from "cypress-react-unit-test";
import styled from "styled-components";
/**
* Create normal react component
* */
const TestComponent = props => {
return <div data-test="TestComponent">This is a test!</div>;
};
/**
* 💄 Now we style with styled-components
* */
const StyledComponent = styled(TestComponent)`
background-color: green;
`;
/**
* Running Test
*/
describe("Can Render Component", () => {
it("Plain Component", () => {
// ✅ Works
mount(<TestComponent />);
cy.get('[data-test="TestComponent"]').should("contain", "test");
});
it("Styled Component as JSX", () => {
// 🔥 Fails
// Error: Element type is invalid: expected a string
// (for built-in components) or a class/function (for composite components)
// but got: object.
mount(<StyledComponent />);
cy.get('[data-test="TestComponent"]').should("contain", "test");
});
it("Styled Component as object reference", () => {
// 🔥 Fails
// Error: TypeError: Cannot read property 'name' of undefined
mount(StyledComponent);
cy.get('[data-test="TestComponent"]').should("contain", "test");
});
});
// =============================================================================
// END Debugging Component
// =============================================================================...you'll see the tests fail.
I was trying to solve this with some style extraction etc. to see what's going on but the last error TypeError: Cannot read property 'name' of undefined is really odd to me.
Thanks in advance
need to set up binary caching
TL;DR document seems to refer to the 'spec' iframes document not the 'app' iframe document
Issue has come up when trying to access document.documentElement.clientHeight for D3 graphing
Eg using hello-world.jsx
import React from 'react'
export class HelloWorld extends React.Component {
render () {
console.log(document.documentElement.clientHeight, document.body.clientHeight); //0 0
return <p>Hello World!</p>
}
}Any ideas of a workaround?
Whenever I try to call Cypress.component, I get Cypress.component is not a function.
right now we add a component in cy.mount but do not wait for it to appear. It would be nice to wait for it and then call log snapshot
In project https://github.com/bahmutov/calculator/tree/cypress-test when running ALL tests together, the click spy on the Button does not work if executing after App spec tests.
Works when running Button tests by itself.
The component is working fine in the first test, but is not doing anything in the second test, but looks good.
would be nice to be able to spy on them
Trying the test runner, the click does not click in the center of the found link
import React from 'react'
import ProjectId from './project-id'
import { mount } from 'cypress-react-unit-test'
import ipc from '../lib/ipc'
/* global cy */
describe('ProjectId', () => {
it('loads', () => {
const project = {
id: 'fake-project-id',
configFile: false,
}
cy.stub(ipc, 'externalOpen').as('externalOpen')
mount(<ProjectId project={project} />)
cy.contains('a', 'Learn more').click()
cy.get('@externalOpen').should('have.been.called')
})
})The failed screenshot showing where the click happens
Manually clicking shows the stub is working
I get an error while mounting my component
The component is correctly render in Cypress regular tests, and it only contains a DropDown from the react-bootstrap lib (same error with the react-simple-dropdown)
import {Dropdown} from 'react-bootstrap';
class UserControls extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Dropdown>
<Dropdown.Toggle>
Toggle
</Dropdown.Toggle>
<Dropdown.Menu>
<li>
menu
</li>
</Dropdown.Menu>
</Dropdown>
);
}
}
UserControls.displayName = 'UserControls';
UserControls.propTypes = {
};
export default UserControls;
Lerna hoists node_modules to the root. Is there a way to disable the module cache?
I will try downgrading in the mean time.
Need to publish code
Repro the issue using the following component:
import React from 'react';
const Button = React.forwardRef(({ children, ...rest }, ref) => <button {...rest} ref={ref}>{children}</button>);
export default Button;The correct way to get the display name is not through JSX magic, but rather from the static member on the object. With function components jsx.type.prototype is undefined.
Take from https://github.com/bahmutov/cypress-react-unit-test/tree/feature/cypress-mount-mode
interface MountOptions {
alias?: string
ReactDom?: typeof ReactDOM
stylesheets?: string | string[]
style?: string
cssFile?: string
}
https://github.com/bahmutov/cypress-react-unit-test/blob/feature/cypress-mount-mode/lib/index.ts#L25
Use case from https://github.com/bahmutov/react-todo-with-hooks/blob/added-tests/src/Todo.spec.js#L11
mount(
<Todo todo={todo} />,
{
stylesheets: [
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css'
]
}
)Hi,
I'm trying to configure unit test environment in my app using Cypress and cypress-react-unit-test. The problem is I have code that needs plugins like "@babel/plugin-proposal-decorators", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-transform-classes" to compile.
My problem is, when I'm pretty sure that code compiles in right way (with big help of webpack-preprocessor) I see that Cypress don't understand cy.mount().
This is my config files of Cypress, am I doing something wrong?
//cypress/support/index.js:
import './commands';
import 'cypress-react-unit-test';
//cypress/plugins/index.js:
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const webpackOptions = require('./webpack.config');
module.exports = on => {
on('file:preprocessor', webpackPreprocessor(webpackOptions));
};
//cypress/plugins/webpack.config.js
module.exports = {
node: {
fs: 'empty'
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: [
'ms',
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-optional-chaining', { loose: true }],
['@babel/plugin-transform-classes', { loose: true }]
]
},
},
],
},
{
test: /\.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader'],
},
],
},
};
I would be really grateful for any help. It's hard to find some info about that library.
with regards :)
Using TypeScript, when attempting to cy.mount an element.
Such as:
cy.mount(<div></div>)Provides the type error:
Argument of type 'Element' is not assignable to parameter of type 'Symbol'.
Property '[Symbol.toStringTag]' is missing in type 'Element' but required in type 'Symbol'.
By default, build on work from #132
Cannot stub server when writing component into the test iframe (only app frame with cy.visit is working)
because the style copying was incorrect
tests in cypress/component/component tests/advanced/lazy-loaded/
describe('dynamic import', () => {
it('loads', () => {
cy.wrap(import('./lazy-add'))
})
})
Babel does have the '@babel/plugin-syntax-dynamic-import' plugin.
Same seems to work with Webpack config from react-scripts bahmutov/test-mdx-example#1
It puts the webpack config into config folder
React portal is not rendering in cypress headed chrome instance.
React Component (Having portal)
import React from "react";
import ReactDOM from 'react-dom';
export class PortalExample extends React.Component {
DOM_OBJECT = null;
constructor(...args) {
super(...args);
const domElement = document.getElementById("portalId");
if (!domElement) {
this.DOM_OBJECT = document.createElement("div");
this.DOM_OBJECT.id = "portalId";
document.body.appendChild(this.DOM_OBJECT);
} else {
this.DOM_OBJECT = document.getElementById("portalId");
}
}
renderApprovalBar = () => {
const portalCOntainer = () => (
<div>
<h2>PORTAL HEADER</h2>
</div>
);
return ReactDOM.createPortal(
portalCOntainer(),
this.DOM_OBJECT
);
}
render() {
return (
<div>
<h1>APP </h1>
{this.renderApprovalBar()}
</div>
);
}
}Test file
import React from "react";
import 'cypress-react-unit-test'
import { PortalExample } from "./portalExample";
describe('React.portal', () => {
it('Test portal is renddering', () => {
cy.mount(<PortalExample />)
cy.get('#portalId')
})
});
Using cy.mount to mount one component can be finished successfully but failed to mount multiple components.
Please find the files in attached zip file (component.and.test.files.zip).
Button.js is the file of component. button.spec.js is the test file.
component and test files.zip
snapshot of error info
error log
cypress_runner.js:172385 Error: TypeError: Invalid value used as weak map key
at WeakMap.set (<anonymous>)
at Object.getDisplayName [as default] (http://localhost:51524/__cypress/tests?p=cypress/integration/button.spec.js-500:254:24)
at Context.exports.mount (http://localhost:51524/__cypress/tests?p=cypress/integration/button.spec.js-500:356:47)
From previous event:
at runCommand (http://localhost:51524/__cypress/runner/cypress_runner.js:78709:14)
at next (http://localhost:51524/__cypress/runner/cypress_runner.js:78793:14)
From previous event:
at http://localhost:51524/__cypress/runner/cypress_runner.js:78812:37
From previous event:
at run (http://localhost:51524/__cypress/runner/cypress_runner.js:78810:15)
at Object.cy.<computed> [as mount] (http://localhost:51524/__cypress/runner/cypress_runner.js:79038:11)
at Context.runnable.fn (http://localhost:51524/__cypress/runner/cypress_runner.js:79168:20)
at callFn (http://localhost:51524/__cypress/runner/cypress_runner.js:51457:21)
at Test.Runnable.run (http://localhost:51524/__cypress/runner/cypress_runner.js:51450:7)
at http://localhost:51524/__cypress/runner/cypress_runner.js:82159:28
From previous event:
at Object.onRunnableRun (http://localhost:51524/__cypress/runner/cypress_runner.js:82154:20)
at $Cypress.action (http://localhost:51524/__cypress/runner/cypress_runner.js:77456:51)
at Test.Runnable.run (http://localhost:51524/__cypress/runner/cypress_runner.js:81220:20)
at Runner.runTest (http://localhost:51524/__cypress/runner/cypress_runner.js:51920:10)
at http://localhost:51524/__cypress/runner/cypress_runner.js:52026:12
at next (http://localhost:51524/__cypress/runner/cypress_runner.js:51840:14)
at http://localhost:51524/__cypress/runner/cypress_runner.js:51850:7
at next (http://localhost:51524/__cypress/runner/cypress_runner.js:51782:14)
at http://localhost:51524/__cypress/runner/cypress_runner.js:51818:5
at timeslice (http://localhost:51524/__cypress/runner/cypress_runner.js:47059:27)
In this example
import counter from './reducers'
const store = createStore(counter)
const rootEl = document.getElementById('root')
const render = () => ReactDOM.render(
<App store={store} />,
rootEl
)
render()
store.subscribe(render)We need to re-render the current JSX App element whenever the store is updated. This test does not update the UI, even when it passes
import React from 'react'
import App from './App'
import {createStore} from 'redux'
import counter from './reducers'
const store = createStore(counter)
describe('App', () => {
it.only('works but never prints new counter', () => {
cy.mount(<App store={store} />)
cy.wrap(store).invoke('getState').should('equal', 0)
cy.contains('button', 'Increment async').click().click().click()
cy.wrap(store).invoke('getState').should('equal', 3)
cy.contains('Clicked: 0 times').should('be.visible')
})
})
We need to somehow simulate from the test itself store.subscribe(render) call
Something like
it.only('works and prints new counter', () => {
cy.mount(<App store={store} />)
store.subscribe(() => {
cy.render(<App store={store} />)
})
cy.wrap(store).invoke('getState').should('equal', 0)
cy.contains('button', 'Increment async').click().click().click()
cy.wrap(store).invoke('getState').should('equal', 3)
cy.contains('Clicked: 3 times').should('be.visible')
})
Hi there,
I'm using this library which greatly helps testing of components, thank you so much for that :)
There is one thing that I cannot seem to figure out, and that is removing the window.fetch() function to force Apollo-Client to use XHR to get the Graphql requests. This way one would be able to stub those requests as per usual. I thought adding an extra chain in cy.window({log: false}).then(removeFetch) which would simply be function removeFetch(w){w.fetch=null;return w) would do the trick, but even though function is actually nullified, the network inspector still shows that fetch is being used for the Graphql query. Would you have any idea or pointer on how to get this working ?
Thanks a bunch!
Gerard.
Hi all.
I am developing react component library with typescript and I would like to test it with cypress-react-unit-test. I tried everything i found on internet, but without success. I would be very thankfull if someone could check it up and point me in some direction.
I am unable to run simple example.test.ts
Here is the link : https://github.com/BogMil/react-crud-master
Thank you in advance
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.