kevinbarabash / vite

A tool for easy React component testing in real browsers.

vite

The goal of this project is to provide and easier and faster way to use Selenium for browser based testing of components. In particular it allows us to test certain things that enzyme can't:

• components which rely on browser behavior, e.g. keyboard navigation
• image regression testing

The system allows you to write tests in a similar what to how you'd write an enzyme test, but instead of using jsdom or shallow rendering it uses Selenium to render components in a real browser. The benefit of this is that when you simulate keyboard events, the browser interprets them as real events which triggers other events normally, e.g. pressing TAB normally causes the focus to be updated which triggers various blur and focus events. This doesn't occur when simulating a TAB keypress event with JavaScript which is what enzyme does.

Quick Start

• yarn
• cd packages/babel-plugin-vite
• yarn build
• cd ../jest-environment-vite
• yarn build
• cd ../vite-demo
• yarn test

Configuration

Example config:

  "jest": {
    "testRegex": "/test/.+\\.js$",
    "testEnvironment": "@khanacademy/jest-environment-vite",
    "testEnvironmentOptions": {
      "capabilities": {
        "browserName": "chrome",
        "chromeOptions": {
          "args": [
            "headless",
            "disable-gpu"
          ]
        }
      },
      "collectCoverage": true
    },
    "globalSetup": "@khanacademy/jest-environment-vite/dist/global-setup.js",
    "globalTeardown": "@khanacademy/jest-environment-vite/dist/global-teardown.js",
    "setupTestFrameworkScriptFile": "@khanacademy/jest-environment-vite/dist/setup.js",
    "verbose": false,
    "moduleNameMapper": {
      "^@khanacademy/(.*)$": "<rootDir>/node_modules/@khanacademy/$1/dist/index.js"
    }
  }

You'lla

Notes:

• collectCoverage must be specified within testEnvironmentOptions. This is because the way jest-environment-vite collects coverage is incompatible with the default jest test runner.
• testEnvironmentOptions are passed through to jest-environment-selenium with the capabilities section being passed through to webdriver.Builder().withCapabilities().

Architecture

The system is comprised of two main parts:

• a server that loads npm modules as well as source .js files
• a babel plugin that rewrites the first argument to render, passing it an object containg the original source of the first argument as well as the necessary imports to use it. See vite-demo/util/util.js for more details.

The server allows us to load any source file and its dependencies in the browser. This avoids having to precompile large bundles ahead of with all of the tests and dependencies. It also means that we don't have to create test pages for each component we want to test using Selenium. Instead, we can construct scripts at runtime to render the components we want.

The server is able to serve npm modules by wrapping commonjs modules in an ES6 module wrapper. Since the browser can import("react") all modules are rewritten as paths, e.g. "/node_modules/react.js". The file extension is necessary b/c Chrome won't load modules using dynamic import statements without it.

TODO

• automate path rewriting within tests
• coverage
• run tests in different browsers
• extract utils from vite-demo into jest-environment-vite
• add config options to jest-environment-vite to toggle debug output from vite-server
• run tests inside docker
• add ability to take screenshots
• comparison new screenshots against existing snapshots
• replace the original vite
• cache compiled npm modules

vite's Issues

allow `render` to accept parameters

e.g.

render((cx, cy, r) => {
   return <svg>
      <ellipse cx={cx} cy={cy} r={r}/>
   </svg>
}, 100, 100, 50);

allow some packages to be loaded from source

In particular we want to allow @khanacademy/wonder-blocks-* components to be loaded from the source index.js so that we can report coverage for source files across all wonder-blocks components when testing them.

We need to update vite-server so that it

• loads the source index.js files when loading /node_modules/@khanacademy/wonder-blocks-*.js
• handle requests for /node_modules/@khanacademy/wonder-blocks-*.js/**/*.js

forward console.log/warn/error and exception stacktraces back to jest

Right now if an error occurs in the browser the test just hangs. We could start with wrapping the contents of render() and all executeScript calls in a try/catch and pass back e.stack from the catch block. It would be cool if we could something like https://github.com/stacktracejs/stacktrace.js.

replace node-ipc with REST endpoints on vite-server

There's an issue with node-ipc dropping coverageMaps. We should be able to replace it with a coverage-map [POST] end point and a coverage-maps [GET] endpoint.