react-component-isolator
A simple module that spins up a react app where the only component is the react component you pass in.
Set up:
react-component-isolator
Install npm install react-component-isolator --save-dev
react-app-rewired
in the client
Install cd <REACT_SUBDIR>
npm install --save-dev react-app-rewired
npm run isolate
command
Add an Inside your package.json
in your React client, add a new script:
Ignore test files
Ignore the following folder:
<REACT_SUBDIR>/src/_isolator_generated_files_
Ignore the following file:
<REACT_SUBDIR>/config-overrides.js
Customization:
Project Subdirectory
If your React project is not in the /client
folder, add a REACT_SUBDIR
environment variable when running tests. If the top-level folder is the React project, use .
as the subdirectory.
Writing Tests
We will assume that you are using dce-selenium
to write your tests.
Import at the top of every test file:
const isolate = ;
Test an individual component:
Call the isolate
function with an arguments object that has the following properties:
component
– the relative path of the component to test from within the /src foldertest
– an asynchronous function containing the tests to run on the component. Called with a url argument (the url to visit to view the component[props]
– an object containing all the properties of the component in the form{ prop: value }
where the values must either be functions or JSONifiable values
From within a prop that is a function, you can use this.get(key)
and this.set(key, val)
to read from/write to the embeddedMetadata.
Using dce-selenium
, you can get the embeddedMetadata using:
const data = await driver;
Example test:
;