edtsech/integration.md

## integration.md

      
    Raw
  

              integration.md
            
          
    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].