gemini plugin for simplifying visual regression testing on React + webpack stack.
WARNING: Right now plugin is pretty much at the proof-of-concept stage, do not use in production.
Install plugin using
npm install gemini-react
Enable it in your gemini config file:
system:plugins:react:webpackConfig: <PATH>hostname: <HOST NAME>port: <PORT NUMBER> ```
webpackConfig(required) – path to your webpack config. Plugin will use loaders from this file to build test pages.
listenHost(default: 127.0.0.1) - hostname to run reference test server on.
port(default: 5432) - port to run test server on.
replaceRootUrl(default: true) - automatically sets
rootUrlof every browser to
http://<listenHost>:<port>. Set to
rootUrlshould be something else.
staticRoot- directory, which contains your static asset files. Will be mounted by your test server automatically.
cssFiles- list of CSS files to include in every test page. Requires
staticRootoption to be set.
jsModules- list of additional js modules to include in the test pages. Relative to project root. This modules will be included into your client bundle before the rest files.
customizeServer- path to js file, used to customize the express server. The file should have a single export, which is function of
Writing the tests
geminiReact variable instead of
setCaptureElements. The rest is the same as vanilla
const MyComponent = ;geminiReact;
TIP: To use JSX in your tests, you might need gemini-babel plugin.
You don't need to create the reference pages or run the server, plugin will do everything for you.
If you want to interact with rendered component, use
inside your test:
If you have any test-specific stylesheets, you can include them into the test
page by calling
geminiReact will capture rendered at mounting point element.
If you want to add some extra elements, use
Viewing the example page
If you want to view example pages without actually running the tests, you can use
gemini-react-server binary, provided by this package:
It will run the server on the host and port, specified in plugin configuration in
The url of each example is a series of ulr-encoded suite names. For example, this suite:
will be served at