Home

Examples

• Increment/Decrement Counter example
• Passing props example
• Spying on a module example

Increment/Decrement Counter

// CounterComponent.tsx
import React from 'react';

export default function CounterComponent() {
  const [counter, setCounter] = React.useState<number>(0);

  const increment = React.useCallback(() => setCounter(counter + 1), [counter]);
  const decrement = React.useCallback(() => setCounter(counter - 1), [counter]);

  return (
    <div>
      <span data-testid="Counter-test-id">{counter}</span>
      <button data-testid="Increment-test-id" onClick={increment}>
        Increment
      </button>
      <button data-testid="Decrement-test-id" onClick={decrement}>
        Decrement
      </button>
    </div>
  );
}

// influnt.ts file
import {configureInflunt} from 'influnt';

export const createRenderer = configureInflunt({});

// CounterComponent.spec.ts
import CounterComponent from './CounterComponent.tsx';
import {createRenderer} from './influnt.ts';
import {textOf} from 'influnt'

describe('CounterComponent', () => {
  const render = createRenderer(CounterComponent, {}); // Create test case specific renderer
  
  it('should increment a counter', async () => {
    const result = await render()
      .inspect({counterBefore: textOf('Counter-test-id')})
      .press('Increment-test-id')
      .inspect({counterAfter: textOf('Counter-test-id')});

    expect(result).toEqual({counterBefore: '0', counterAfter: '1'});
  });

  it('should decrement a counter', async () => {
    const result = await render()
      .inspect({counterBefore: textOf('Counter-test-id')})
      .press('Decrement-test-id')
      .inspect({counterAfter: textOf('Counter-test-id')});

    expect(result).toEqual({counterBefore: '0', counterAfter: '-1'});
  });
});

Passing props

import React from 'react';

// MyComponent.tsx
interface Props {
  title: string;
  showButton: boolean;
}

function MyComponent({title, showButton}: Props) {
  return (
    <div>
      <span data-testid="Title1">{title}</span>
      {showButton && <button data-testid="Button1">ButtonText</button>}
    </div>
  );
}

// influnt.ts file
const createRenderer = configureInflunt();

// MyComponent.spec.ts
import {textOf, exists} from 'influnt'
import MyComponent from './MyComponent.tsx';
import {createRenderer} from './influnt.ts';

const defaultProps = {title: 'DefaultTitle', showButton: false};

const render = createRenderer(MyComponent, {passProps: defaultProps});

describe('MyComponent', () => {
  it('should display title', async () => {
    const result = await render()
      .inspect({title: textOf('Title1')});
      
    expect(result).toEqual({title: 'DefaultTitle'});
  });

  it('should display title2', async () => {
    const result = await render({passProps: {title: 'SuiteTitle'}})
      .inspect({title: textOf('Title1')});
      
    expect(result).toEqual({title: 'SuiteTitle'});
  });

  it('should display a button and title', async () => {
    const result = await render({passProps: {showButton: true}})
      .inspect({buttonExists: exists('Button1'), title: textOf('Title1')});
      
    expect(result).toEqual({buttonExists: true, title: 'DefaultTitle'});
  });
});

Spying on a module

// TestComponent.tsx
import React from 'react';
import {showToast} from '<path>'; // function that is responsible for showing a toast

export default function TestComponent() {
  const showSuccessToast = () => showToast('Success!');
  const showErrorToast = () => showToast('Error!');

  return (
    <div>
      <button data-testid="Success" onClick={showSuccessToast}>
        Show success toast
      </button>
      <button data-testid="Error" onClick={showErrorToast}>
        Show error toast
      </button>
    </div>
  );
}

// jest setup file
jest.mock('<path-to-file-that-exports-showToast-function>', () => {
  const actual = jest.requireActual('<path-to-file-that-exports-showToast-function>');
  Object.assign(actual, {showToast: jest.fn()});
  return actual;
});

// influnt.ts file
import {configureInflunt, spyModule} from 'influnt';

const toastSpy = spyModule('toast', {
  module: showToast,
  parseArgs: (value) => ({message: value[0]}), // extract only the information that is relevant to us for logging
});

export const createRenderer = configureInflunt({
  spyModules: [toastSpy], // Register toastSpy for all tests
});


// TestComponent.spec.ts
import {createRenderer} from './influnt.ts';
import TestComponent from './TestComponent.tsx';

const render = createRenderer(TestComponent);

describe('spyModules', () => {
  it('should show success toast', async () => {
    const result = await render().press('Success');
    expect(result).toEqual({toast: [{message: 'Success!'}]});
  });

  it('should show success and error toasts', async () => {
    const result = await render().press('Success').press('Error');
    expect(result).toEqual({toast: [{message: 'Success!'}, {message: 'Error!'}]});
  });
});