Adding testing to a plugin

Adding unit testing

Create React App adds the frameworks for Jest unit tests by default and these are a good starting point. As well as these we want to add Enzyme to be able to do snapshot testing:

yarn add --dev enzyme enzyme-adapter-react-16 enzyme-to-json

We should then update the test script in package.json to also run coverage

"test": "react-scripts test --env=jsdom --coverage",
"test:watch": "react-scripts test --env=jsdom --watch",

Then add a new jest section to package.json to exclude top level untestable files as well as configuring enzyme as the serialiser:

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ],
  "collectCoverageFrom": [
    "src/**/*.{tsx,js,jsx}",
    "!src/index.tsx",
    "!src/serviceWorker.ts",
    "!src/setupTests.js"
  ]
},

Finally, add a src/setupTests.js file that is automatically picked up by create react app and configures Enzyme when running the tests, the contents of which can be found here

As well as conventional javascript tests there are also snapshot tests for the components; there is a good explanation here (https://jestjs.io/docs/en/snapshot-testing). These allow unit level testing of the UI without the burden of maintaining the output html ourselves. Snapshots should be checked in as these are what the tests run against.

Adding end-to-end testing

Install Cypress (https://www.cypress.io/)

yarn add --dev cypress

Run yarn run cypress open to create a new cypress project in your code base, then add new commands to the scripts section of your package.json to run the e2e tests:

"cy:open": "cypress open",
"cy:run": "cypress run",

Also update the contents of cypress.json:

{
  "baseUrl": "http://127.0.0.1:3000",
  "chromeWebSecurity": false,
  "video": false
}

To be able to use TypeScript in Cypress, add the following .tsconfig file to the /cypress folder

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*"]
}

You need to be running your site at the time you run these tests (i.e. run npm start in a separate console). To make this easier you may want to define an end-to-end server file to serve the built artifacts using node so that no browser is required. For example, see server/e2e-test-server.js

Install cross-env and start-server-and-test:

yarn add --dev cross-env start-server-and-test

and add the following commands to the scripts section of package.json:

"build:e2e": "cross-env REACT_APP_E2E_TESTING=true GENERATE_SOURCEMAP=false react-scripts build",
"e2e:serve": "yarn build:e2e && node ./server/e2e-test-server.js",
"e2e:interactive": "start-server-and-test e2e:serve http://localhost:3000 cy:open",
"e2e": "start-server-and-test e2e:serve http://localhost:3000 cy:run",

To run the e2e tests run

yarn e2e

this will run the tests on the command line in a headless mode. To run the e2e tests interactively run

yarn e2e:interactive