React testing example

Container.test.tsx

import React from 'react';
import { mount } from 'enzyme';

import apiService from 'src/services/api-service';

apiService.fetch = jest.fn(() => Promise.resolve([{ name: 'foo' }]));

import Container from './Container';
import Form from '../form/Form';
import Results from '../results/Results';

describe('<Container />', () => {
  let wrapper: any;

  beforeEach(() => {
    wrapper = mount(<Container />);
  });

  afterEach(() => {
    jest.resetAllMocks();
  });

  it('contains Results and Form components', () => {
    expect(wrapper.find(Form).length).toBe(1);
    expect(wrapper.find(Results).length).toBe(1);
  });

  it('requests github repositories upon submission', async () => {
    const form = wrapper.find(Form);
    const onSubmit = form.prop('onSubmit');
    const value = 'foo';

    await onSubmit(value);
    wrapper.update();
    const results = wrapper.find(Results);

    expect(apiService.fetch).toHaveBeenCalledWith(
      `https://api.github.com/users/${value}/repos`
    );
    expect(results.length).toBeTruthy();
  });
});

Container.tsx

import React, { useState } from 'react';

import apiService from 'src/services/api-service';

import Form from '../form/Form';
import Results from '../results/Results';

const Container = () => {
  const [results, setResults] = useState<any>([]);

  const handleSubmit = async (value: string) => {
    const endpoint = `https://api.github.com/users/${value}/repos`;
    const newResults = await apiService.fetch(endpoint);
    setResults(newResults);
  };

  return (
    <div>
      <Form onSubmit={handleSubmit} />
      {results.length > 0 && <Results results={results} />}
    </div>
  );
};

export default Container;

Form.test.tsx

import React from 'react';
import { mount } from 'enzyme';

import Form from './Form';

const onSubmit = jest.fn();

describe('<Form />', () => {
  let wrapper: any;

  beforeEach(() => {
    wrapper = mount(<Form onSubmit={onSubmit} />);
  });

  it('renders a form', () => {
    expect(wrapper.find('form').length).toBe(1);
  });

  it('calls onSubmit upon submission', () => {
    const value = 'foo';
    const form = wrapper.find('form');
    const button = wrapper.find('button');
    const input = wrapper.find('input').getDOMNode();
    input.value = value;

    form.simulate('submit');

    expect(onSubmit).toHaveBeenCalled();
  });
});

Form.tsx

import React, { useRef } from 'react';

type Props = {
  onSubmit: (value: string) => void;
};

const Form = (props: Props) => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: any) => {
    e.preventDefault();

    const input = inputRef.current as HTMLInputElement;
    props.onSubmit(input.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} />
      <button type="submit">Search</button>
    </form>
  );
};

export default Form;

Results.test.tsx

import React from 'react';
import { mount } from 'enzyme';
import faker from 'faker';
import times from 'lodash/times';

import Results from './Results';

const createResult = () => ({
  name: faker.lorem.word()
});

describe('<Results />', () => {
  it('renders results', () => {
    const results = times(5, () => createResult());
    const wrapper = mount(<Results results={results} />);

    const resultElements = wrapper.find('li');
    expect(resultElements.length).toBe(results.length);
  });
});

Results.tsx

import React from 'react';

type Result = {
  name: string;
};

type Props = {
  results: Result[];
};

const Results = (props: Props) => {
  return (
    <ul>
      {props.results.map((result, index) => (
        <li key={index}>{result.name}</li>
      ))}
    </ul>
  );
};

export default Results;