// import a function named "sum" that takes two parameters
const sum = require('./sum');
// test that 1 + 2 equals 3!
it('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
- v1.0.0-latest-prod
This doc covers how we do testing in the starter app.
Jest is a testing framework for JavaScript applications. It is developed and used by Facebook for testing all of their code and React applications.
Let’s see a little Jest test (example source):
// import a function named "sum" that takes two parameters
const sum = require('./sum');
// test that 1 + 2 equals 3!
it('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});You can create a test-suite using the describe method to group several related tests together.
// suite with label
describe('#useSandboxColors', () => {
// 1st test in suite
it('returns colors for dark sandbox color', () => {
const holder = testHook({
id: '1',
name: 'dark',
color: '#000000',
});
expect(holder.hook.background.primary).toEqual('#000000');
expect(holder.hook.text.primary).toEqual('#ffffff');
});
// 2nd test in suite
it('returns colors for light sandbox color', () => {
const holder = testHook({
id: '1',
name: 'light',
color: '#ffffff',
});
expect(holder.hook.background.primary).toEqual('#ffffff');
expect(holder.hook.text.primary).toEqual('#000000');
});
});|
Important
|
Tests for a component, hook, or util should be placed in a file with the same name but ending in .test.ts or .test.tsx as appropriate: button.tsx would have a button.test.tsx.
|
React Testing Library provides testing of components using a real DOM. The following test demonstrates using this library to mount a component to test a hook’s operation.
import { render } from '@testing-library/react';
import { Sandbox } from '@broadleaf/commerce-sandbox';
import { SandboxColors, useSandboxColors } from './use-sandbox-colors';
describe('#useSandboxColors', () => {
it('returns colors for dark sandbox color', () => {
const holder = testHook({
id: '1',
name: 'dark',
color: '#000000',
});
expect(holder.hook.background.primary).toEqual('#000000');
expect(holder.hook.text.primary).toEqual('#ffffff');
});
it('returns colors for light sandbox color', () => {
const holder = testHook({
id: '1',
name: 'light',
color: '#ffffff',
});
expect(holder.hook.background.primary).toEqual('#ffffff');
expect(holder.hook.text.primary).toEqual('#000000');
});
});
type Holder = {
hook: SandboxColors;
};
function testHook(sandbox: Sandbox): Holder {
const holder = { hook: undefined } as Holder;
const TestComponent = () => {
holder.hook = useSandboxColors(sandbox);
return <div />;
};
render(<TestComponent />);
return holder;
}Running the tests in this project is very straightforward. Here are some of the common commands for running our testings:
yarn test: Run all the tests in interactive mode
yarn test:coverage: Run all the tests and generate coverage
yarn test <args>: You can pass any cli options for jest to this command
yarn test ./src/components: Run all tests within a directory
yarn test ./src/components/Button/Button.test.js: Run a specific component’s tests only
yarn test -t 'name of test': Run a specific test by name or describe label
If you had it('should render Header', () ⇒ {…}), you can run it specifically with yarn test -t 'should render Header'