Testing

Unit Tests

To help improve the stability of the Fundamental React components, unit testing and code coverage reports are created using Jest and Enzyme

Set-up

To ensure that you have the proper npm modules installed for unit testing, from the terminal window: npm install

Running Tests and Code Coverage

Configuration is setup to look for .test.js files in the /src/ directory.

npm test

Launches the test runner in the interactive watch mode.

npm test -- --coverage

Launches the test runner and display code coverage report. The code coverage report will only be applied to the Components main .js file. Coverage reports will not be created for .Component.js files.

npm test -- --coverage --watch

Launches the test runner and display code coverage report as well starts interactive watch mode.

npm test -- -u

Updates any snapshots you have edited.

Creating a Unit Test

Depending on the component, there are different approaches to creating unit tests. The easiest way to make sure that a component is rendered with the desired output is by creating a snapshot. The first time a snapshot is created it will render the component based off the prop values sent to the component. Each subsequent unit test will check against the snapshot to make sure the component is rendering exactly as before.

Testing user interaction of a component can be done with Enzyme and Jest. Please refer to Enzyme's documentation on how to interact with the DOM.

Viewing results

You can view a nice visual representation of the code coverage status as well as see what lines are missing coverage. In the repository of your fundamental-react project navigate to /coverage/lcov-report/index.html. From here you can click on the component name you want to view coverage for view the lines covered in the JS file. Placing your mouse over a highlighted line of code will display a tooltip.

Common issues

Invariant Violation: Target container is not a DOM element.

This issue is usually caused because the modules being imported are not properly defined. An example of improperly defining modules to be imported is by grouping all the components needed and just referencing the whole library.

Ex: import {Popover, Time} from '../';

The correct solution is to import the modules from their defined location.

Ex: import {Popover} from '../Popover/Popover'; import {Time} from '../Time/Time';

Visual Regression Tests

Fundamental-react's visual regression tests are powered by storybook, puppeteer and storyshots.

npm run test:visual

Launches the visual regression test runner.

For each change to the component that can be displayed in a visual way, a new storybook story should be created and added to the component's __stories__/Component.stories.js file.

npm run test:visual:update

Once your changes have been added, run this command to add the changes to the visual-regression-testing/__image_snapshots__ folder.

Snapshot Tests

Fundamental-react's snapshot tests are powered by storybook, puppeteer and storyshots.

npm run test:snapshot

Launches the visual regression test runner.

For each change to the component that can be displayed in a visual way, a new storybook story should be created and added to the component's __stories__/Component.stories.js file.

npm run test:snapshot:update

Once your changes have been added, run this command to add the changes to the __stories__/__snapshots__ folder.