A React web app that is built with testing in mind
MIT License
A React web app that is built with testing in mind
npm init -y
npm i create-react-app
npx create-react-app my-app
cd my-app
npm start
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
A URL with the right text exists | π ββοΈ | ||
App renders correctly | π ββοΈ | ||
URL is correct | π ββοΈ | ||
App looks as expected on web and mobile | π ββοΈ | ||
Front-end performance is at least a B | π ββοΈ | ||
App is secure | π ββοΈ | ||
App is accessibility friendly | π ββοΈ |
npm run test
Now that everything is working, let's push this up to CI so that we can make sure it continues to work on other computers besides ours.
name: CI
env:
SCREENER_API_KEY: ${{ secrets.SCREENER_API_KEY }}
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies π¦
#Using npm ci is generally faster than running npm install
run: |
cd my-app
npm ci
- name: Build the app π
run: |
cd my-app
npm run build
- name: Run component tests πΈ
run: |
cd my-app
npm run test
- name: Start the app π€
run: |
cd my-app
npm start &
npx wait-on --timeout 60000
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
A URL with the right text exists | β | Component | React testing library, Jest |
App renders correctly | π ββοΈ | ||
URL is correct | π ββοΈ | ||
App looks as expected on web and mobile | π ββοΈ | ||
Front-end performance is at least a B | π ββοΈ | ||
App is secure | π ββοΈ | ||
App is accessibility friendly | π ββοΈ |
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
A URL with the right text exists | β | Component | React testing library, Jest |
App renders correctly | π ββοΈ | ||
URL is correct | β | Component | React testing library, Jest |
App looks as expected on web and mobile | π ββοΈ | ||
Front-end performance is at least a B | π ββοΈ | ||
App is secure | π ββοΈ | ||
App is accessibility friendly | π ββοΈ |
npm install @wdio/cli
npx wdio config
describe('My React application', () => {
it('should look correct', () => {
browser.url('');
browser.execute('/*@visual.init*/', 'My React App');
browser.execute('/*@visual.snapshot*/', 'Home Page');
const result = browser.execute('/*@visual.end*/');
expect(result.message).toBeNull();
});
});
π§ͺοΈTest Plan
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
A URL with the right text exists | β | Component | React testing library, Jest |
App renders correctly | β | visual d2d | Webdriverio, Screener.io |
URL is correct | β | Component | React testing library, Jest |
App looks as expected on web and mobile | β | visual d2d | Webdriverio, Screener.io |
Front-end performance is at least a B | π ββοΈ | ||
App is secure | π ββοΈ | ||
App is accessibility friendly | π ββοΈ |