Skip to content

Commit 1f91848

Browse files
EnoahNetzachgaearon
EnoahNetzach
authored and
gaearon
committed
E2E testing enhancements (#2408)
* Local testing with docker * Docs on e2e testing * `bash` callback after docker * Add a TL;DR in the CONTRIBUTING section * Local e2e testing with modified files * Remove the N.B. from the README * Fixed a fixme in e2e doc
1 parent c22c8b3 commit 1f91848

File tree

4 files changed

+172
-0
lines changed

4 files changed

+172
-0
lines changed

‎CONTRIBUTING.md

+6
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,12 @@ and then run `npm start` or `npm run build`.
9090

9191
*Note: if you are using yarn, we suggest that you use `yarn install --no-lockfile` instead of the bare `yarn` or `yarn install` because we [intentionally](https://github.com/facebookincubator/create-react-app/pull/2014#issuecomment-300811661) do not ignore or add yarn.lock to our repo.*
9292

93+
## Contributing to E2E (end to end) tests
94+
95+
**TL;DR** use the command yarn e2e:docker to run unit and e2e tests.
96+
97+
More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md).
98+
9399
## Cutting a Release
94100

95101
1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"changelog": "lerna-changelog",
66
"create-react-app": "tasks/cra.sh",
77
"e2e": "tasks/e2e-simple.sh",
8+
"e2e:docker": "tasks/local-test.sh",
89
"postinstall": "lerna bootstrap && cd packages/react-error-overlay/ && npm run build:prod",
910
"publish": "tasks/release.sh",
1011
"start": "node packages/react-scripts/scripts/start.js",

‎packages/react-scripts/fixtures/kitchensink/README.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Contributing to Create React App's E2E tests
2+
3+
This is an end to end kitchensink test suite, but has multiple usages in it.
4+
5+
## Running the test suite
6+
7+
Tests are automatically run by the CI tools.
8+
In order to run them locally, without having to manually install and configure everything, the `yarn e2e:docker` CLI command can be used.
9+
10+
This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen.
11+
Simply run `yarn e2e:docker -- --help` to get additional info.
12+
13+
## Writing tests
14+
15+
Each time a new feature is added, it is advised to add at least one test covering it.
16+
17+
Features are categorized by their scope:
18+
19+
- *env*, all those which deal with environment variables (e.g. `NODE_PATH`)
20+
21+
- *syntax*, all those which showcase a single EcmaScript syntax feature that is expected to be transpiled by **Babel**
22+
23+
- *webpack*, all those which make use of webpack settings, loaders or plugins
24+
25+
### Using it as Unit Tests
26+
27+
In it's most basic for this serve as a collection of unit tests on a single functionality.
28+
29+
Unit tests are written in a `src/features/**/*.test.js` file located in the same folder as the feature they test, and usually consist of a simple `ReactDOM.render` call.
30+
31+
These tests are run by **jest** and the environment is `test`, so that it resembles how a **Create React App** application is tested.
32+
33+
### Using it as Integration Tests
34+
35+
This suite tests how the single features as before behave while development and in production.
36+
A local HTTP server is started, then every single feature is loaded, one by one, to be tested.
37+
38+
Test are written in `integration/{env|syntax|webpack}.test.js`, depending on their scope.
39+
40+
For every test case added there is just a little chore to do:
41+
42+
- a `case` statement must be added in `src/App.js`, which simply perform a dynamic `import()` of the feature
43+
44+
- add a test case in the appropriate integration test file, which calls and awaits `initDOM` with the previous `SwitchCase` string
45+
46+
An usual flow for the test itself is something similar to:
47+
48+
- add an `id` attribute in a target HTML tag in the feature itself
49+
50+
- since `initDOM` returns a `Document` element, the previous `id` attribute is used to target the feature's DOM and `expect` accordingly
51+
52+
These tests are run by **mocha** (why not **jest**? See [this issue](https://github.com/facebook/jest/issues/2288)) and the environments used are both `development` and `production`.

‎tasks/local-test.sh

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
#!/usr/bin/env bash
2+
3+
function print_help {
4+
echo "Usage: ${0} [OPTIONS]"
5+
echo ""
6+
echo "OPTIONS:"
7+
echo " --node-version <version> the node version to use while testing [6]"
8+
echo " --git-branch <branch> the git branch to checkout for testing [the current one]"
9+
echo " --test-suite <suite> which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']"
10+
echo " --yarn if present, use yarn as the package manager"
11+
echo " --interactive gain a bash shell after the test run"
12+
echo " --help print this message and exit"
13+
echo ""
14+
}
15+
16+
cd $(dirname $0)
17+
18+
node_version=6
19+
current_git_branch=`git rev-parse --abbrev-ref HEAD`
20+
git_branch=${current_git_branch}
21+
use_yarn=no
22+
test_suite=all
23+
interactive=false
24+
25+
while [ "$1" != "" ]; do
26+
case $1 in
27+
"--node-version")
28+
shift
29+
node_version=$1
30+
;;
31+
"--git-branch")
32+
shift
33+
git_branch=$1
34+
;;
35+
"--yarn")
36+
use_yarn=yes
37+
;;
38+
"--test-suite")
39+
shift
40+
test_suite=$1
41+
;;
42+
"--interactive")
43+
interactive=true
44+
;;
45+
"--help")
46+
print_help
47+
exit 0
48+
;;
49+
esac
50+
shift
51+
done
52+
53+
test_command="./tasks/e2e-simple.sh && ./tasks/e2e-kitchensink.sh && ./tasks/e2e-installs.sh"
54+
case ${test_suite} in
55+
"all")
56+
;;
57+
"simple")
58+
test_command="./tasks/e2e-simple.sh"
59+
;;
60+
"kitchensink")
61+
test_command="./tasks/e2e-kitchensink.sh"
62+
;;
63+
"installs")
64+
test_command="./tasks/e2e-installs.sh"
65+
;;
66+
*)
67+
;;
68+
esac
69+
70+
read -r -d '' apply_changes <<- CMD
71+
cd /var/create-react-app
72+
git config --global user.name "Create React App"
73+
git config --global user.email "[email protected]"
74+
git stash save -u
75+
git stash show -p > patch
76+
git diff 4b825dc642cb6eb9a060e54bf8d69288fbee4904 stash^3 >> patch
77+
git stash pop
78+
cd -
79+
mv /var/create-react-app/patch .
80+
git apply patch
81+
rm patch
82+
CMD
83+
84+
if [ ${git_branch} != ${current_git_branch} ]; then
85+
apply_changes=''
86+
fi
87+
88+
read -r -d '' command <<- CMD
89+
echo "prefix=~/.npm" > ~/.npmrc
90+
mkdir ~/.npm
91+
export PATH=\$PATH:~/.npm/bin
92+
set -x
93+
git clone /var/create-react-app create-react-app --branch ${git_branch}
94+
cd create-react-app
95+
${apply_changes}
96+
node --version
97+
npm --version
98+
set +x
99+
${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m"
100+
$([[ ${interactive} == 'true' ]] && echo 'bash')
101+
CMD
102+
103+
docker run \
104+
--env CI=true \
105+
--env NPM_CONFIG_QUIET=true \
106+
--env USE_YARN=${use_yarn} \
107+
--tty \
108+
--user node \
109+
--volume ${PWD}/..:/var/create-react-app \
110+
--workdir /home/node \
111+
$([[ ${interactive} == 'true' ]] && echo '--interactive') \
112+
node:${node_version} \
113+
bash -c "${command}"

0 commit comments

Comments
 (0)