Skip to content

Instantly share code, notes, and snippets.

@edtsech
Last active August 18, 2017 10:08
Show Gist options
  • Save edtsech/2f5ff0b45f30035069bcb0d2e224ab5f to your computer and use it in GitHub Desktop.
Save edtsech/2f5ff0b45f30035069bcb0d2e224ab5f to your computer and use it in GitHub Desktop.
Testshot + create-react-app guide w/o ejecting

How to integrate Testshot with an application bootstrapped with create-react-app

In this tutorial we are going to integrate Testshot with create-react-app which uses Webpack.

Let's bootstrap an application

create-react-app react-app
cd react-app

Actual Integration

1. Add Testshot to your project

yarn add @toptal/testshot

2. Create Testshot folder

mkdir testshot

First we need to add Testshot HTML template

touch testshot/template.ejs

with following content:

<!doctype html>
<html>
  <head>
    <title>Testshot</title>
  </head>
  <body>
    <script type="text/javascript">
      // Web Socket URL for communication with CI
      window.__testshotWSURL = "<%= wsURL %>"
      window.__diffCSS = <%= diffCSS %>
    </script>
    <script type="text/javascript" src="<%= entryPath %>"></script>
  </body>
</html>

Second, we need to create Testshot initialization script

touch testshot/init.js

with following content

// Path to CSS of your application
require('../src/index.css')

const Testshot = require('testshot')

const scenariosContext = require.context('../src', true, /\/scenarios\.jsx?$/)
scenariosContext.keys().forEach(scenariosContext)

Testshot.init({className: 'testshot'})

3. Create Webpack Testshot config

We need to create a Webpack config for Testshot

touch testshot/webpack.config.testshot.js

with following content

const devConfig = require('react-scripts/config/webpack.config.dev')
const fs = require('fs')
const path = require('path')

const testshotConfig = Object.assign({}, devConfig, {
  entry: [
    ...devConfig.entry.slice(0, -1),
    path.resolve(fs.realpathSync(process.cwd()), 'testshot/init.js')
  ],

  output: Object.assign({}, devConfig.output, {
    filename: 'static/js/testshot.js'
  })
})

module.exports = testshotConfig

4. Add Testshot config

Add Testshot config

touch testshot.config.json

with following content

{
  "port": 5001,
  "snapshots_path": "snapshots",
  "entry_url": "http://localhost:5000/assets/js/init.js",
  "template_path": "testshot/template.ejs"
}

Take a look here for all available configuration options

5. Add Testshot scripts to package.json

We need to add the following scripts to package.json:

"testshot-webpack":
  "env NODE_ENV=development webpack-dev-server --config ./testshot/webpack.config.testshot.js --port 5000",
"testshot-server": "testshot-server"

Run

Run webpack script builder

yarn testshot-webpack

Run Testshot

yarn testshot-server

Open Testshot

open localhost:5001

If you see Testshot welcome screen then it's time to [add your first Testshot scenario]. In case you have some issue with integration or some ideas how to improve this process feel free to [open an issue].

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment