Skip to content

Commit 2be451c

Browse files
committed
Transpile and resolve App imports for Cucumber
1 parent 1d7be71 commit 2be451c

File tree

6 files changed

+61
-8
lines changed

6 files changed

+61
-8
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
# transpiled
1515
features/transpiled_step_definitions
16+
transpiled
1617

1718
# misc
1819
.DS_Store

README.md

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,58 @@ This project will show you how to setup Cucumber and Enzyme on a Create React Ap
2020
1. Cucumber runs the step definitions from features/transpiled_step_definitions, so you need to change a breaking imports in step_definitions/stepdefs.js located to `import App from '../../src/App';`
2121
1. Remove src/App.test.js and change test script to the following: `"test": "npm run babel-test && npm run cucumber-test"`. You can now run your tests with npm run test
2222
1. At this point, Babel should be able to transpile your Cucumber step definitions folder, but your tests will not pass yet because your App isn't transpiled either!
23-
23+
1. Transpile your source folder, by adding the following script: `"babel-src": "npx babel src --out-dir transpiled --presets=@babel/react,@babel/preset-env --copy-files"` IMPORTANT: Notice that you need to add --copy-files to bring over the non-transpiled files for React. Also make sure to add transpiled to your .gitignore
24+
1. Fix breaking imports to use transpiled instead of src: `import App from '../../transpiled/App';`
25+
1. Change the test script to include transpiling of the src folder: `"test": "npm run babel-src && npm run babel-test && npm run cucumber-test"`
26+
1. Your tests will now run! However, they will fail because the DOM does not exist in the backend. We will fix this shortly.
2427

2528
### FAQ / Troubleshooting
2629

2730
Q: I have the following error: (function (exports, require, module, __filename, __dirname) { import React from 'react';
31+
2832
A: You need to transpile your step_definitions and/or src directory with Babel, and you need to use the preset @babel/preset-env https://babeljs.io/docs/en/babel-preset-env
2933

34+
---
35+
3036
Q: I have an Unexpected token error: ReactDOM.render(<App />, div);
37+
3138
A: You need to transpile with the Babel preset @babel/preset-react https://babeljs.io/docs/en/babel-preset-react
3239

40+
---
41+
3342
Q: Error: Cannot find module './App'
34-
A: You need to change your app import in your step_definitions, as if you were running the step definitions from features/transpiled_step_definitions. The correct import mid-tutorial will be ../../src/App in this project. If you have completed the tutorial, this import will be ../../transpiled/App
43+
44+
A: You need to change your app import in your step_definitions, as if you were running the step definitions from features/transpiled_step_definitions. The correct import mid-tutorial will be ../../src/App in this project. If you have started to transpile your application, this import will be ../../transpiled/App
45+
46+
---
47+
48+
Q: I have a Syntax error: (function (exports, require, module, __filename, __dirname) { \<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
49+
50+
Q2: Importing CSS in Cucumber React - I have a Syntax error: (function (exports, require, module, __filename, __dirname) { .App {
51+
52+
SyntaxError: Unexpected token .
53+
54+
A: Your Cucumber step_definitions are running on server instead of a browser client. Therefore, your React code needs to check if it has access to the DOM. https://stackoverflow.com/questions/32216383/in-react-how-do-i-detect-if-my-component-is-rendering-from-the-client-or-the-se
55+
56+
---
57+
58+
Q: 'import' and 'export' may only appear at the top level (9:2)
59+
A: Use require instead of import.
60+
61+
For Example:
62+
```
63+
import logo from './logo.svg';
64+
import './App.css';
65+
```
66+
Gets converted to
67+
```
68+
let canUseDOM = !!(
69+
(typeof window !== 'undefined' &&
70+
window.document && window.document.createElement)
71+
);
72+
73+
if (canUseDOM) {
74+
logo = require('./logo.svg');
75+
require('./App.css');
76+
}
77+
```

features/renders_without_crashing.feature

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ Feature: Renders without Crashing
22
Everybody wants to know if my React App can render without crashing
33

44
Scenario: Render App
5-
Given a Document Object Model (DOM)
5+
Given the DOM
66
When I render a React component called: App
77
Then my app should have rendered without crashing

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"scripts": {
1111
"start": "react-scripts start",
1212
"build": "react-scripts build",
13-
"test": "npm run babel-test && npm run cucumber-test",
13+
"test": "npm run babel-src && npm run babel-test && npm run cucumber-test",
14+
"babel-src": "npx babel src --out-dir transpiled --presets=@babel/react,@babel/preset-env --copy-files",
1415
"cucumber-test": "cucumber-js",
1516
"babel-test": "npx babel step_definitions --out-dir features/transpiled_step_definitions --presets=@babel/react,@babel/preset-env",
1617
"eject": "react-scripts eject"

src/App.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
3+
let canUseDOM = !!(
4+
(typeof window !== 'undefined' &&
5+
window.document && window.document.createElement)
6+
);
7+
8+
if (canUseDOM) {
9+
logo = require('./logo.svg');
10+
require('./App.css');
11+
}
412

513
class App extends Component {
614
render() {

step_definitions/stepdefs.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import App from '../../src/App';
3+
import App from '../../transpiled/App';
44

55
const assert = require('assert');
66
const { Given, When, Then } = require('cucumber');
77

8-
Given('a Document Object Model \(DOM)', function () {
8+
Given('the DOM', function () {
99
const div = document.createElement('div');
1010
});
1111

0 commit comments

Comments
 (0)