|
16 | 16 |
|
17 | 17 | ## Install |
18 | 18 |
|
19 | | -Requires [Node](https://nodejs.org/en/) version 6 or above. |
| 19 | +Requires [Node](https://nodejs.org/en/) version 8 or above. |
20 | 20 |
|
21 | 21 | ```sh |
22 | 22 | 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 |
80 | 80 |
|
81 | 81 | ## Transpilation |
82 | 82 |
|
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) |
138 | 84 |
|
139 | 85 | ## Examples |
140 | 86 |
|
|
0 commit comments