Skip to content
This repository was archived by the owner on Mar 5, 2022. It is now read-only.

Commit 8a23f96

Browse files
authored
Upgrade webpack preprocessor (#117)
* install new webpack preprocessor v4 * remove old code * Node 8
1 parent 4e2f899 commit 8a23f96

File tree

4 files changed

+3023
-1324
lines changed

4 files changed

+3023
-1324
lines changed

README.md

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
## Install
1818

19-
Requires [Node](https://nodejs.org/en/) version 6 or above.
19+
Requires [Node](https://nodejs.org/en/) version 8 or above.
2020

2121
```sh
2222
npm install --save-dev cypress cypress-react-unit-test
@@ -80,61 +80,7 @@ If your React and React DOM libraries are installed in non-standard paths (think
8080

8181
## Transpilation
8282

83-
How can we use features that require transpilation? Using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme). You can use [cypress/plugins/index.js](cypress/plugins/index.js) to configure any transpilation plugins you need.
84-
85-
For example, to enable class properties:
86-
87-
```js
88-
// cypress/plugins/index.js
89-
const webpack = require('@cypress/webpack-preprocessor')
90-
const webpackOptions = {
91-
module: {
92-
rules: [
93-
{
94-
test: /\.(js|jsx|mjs)$/,
95-
loader: 'babel-loader',
96-
options: {
97-
presets: ['@babel/preset-env', '@babel/preset-react'],
98-
plugins: ['@babel/plugin-proposal-class-properties'],
99-
},
100-
}
101-
]
102-
}
103-
}
104-
105-
const options = {
106-
// send in the options from your webpack.config.js, so it works the same
107-
// as your app's code
108-
webpackOptions,
109-
watchOptions: {}
110-
}
111-
112-
module.exports = on => {
113-
on('file:preprocessor', webpack(options))
114-
}
115-
```
116-
117-
Install dev dependencies
118-
119-
```shell
120-
npm i -D @cypress/webpack-preprocessor \
121-
babel-loader @babel/preset-env @babel/preset-react \
122-
@babel/plugin-proposal-class-properties
123-
```
124-
125-
And write a component using class properties
126-
127-
```js
128-
import React from 'react'
129-
130-
export class Transpiled extends React.Component {
131-
state = {
132-
count: 0
133-
}
134-
135-
// ...
136-
}
137-
```
83+
How can we use features that require transpilation? By using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme) - see the plugin configuration in [cypress/plugins/index.js](cypress/plugins/index.js)
13884

13985
## Examples
14086

cypress/plugins/index.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
const webpack = require('@cypress/webpack-preprocessor')
22
const webpackOptions = {
3-
// https://webpack.js.org/configuration/node/
4-
// avoid winston logger problem
5-
// https://github.com/percy/percy-cypress/issues/58
6-
node: {
7-
fs: 'empty'
8-
},
93
module: {
104
rules: [
115
{

0 commit comments

Comments
 (0)