HexInput.test.tsx

import React from 'react';
import { render, fireEvent, cleanup } from 'react-testing-library';

import { ColorToolContext } from '~/ColorToolContext';
import { updateHex } from '~/colorReducer';
import { HexInput } from '../HexInput';

describe('HexInput component', () => {
  test('dispatch updated hex value when input changes', () => {
    const testHex = '#abcef';
    const state = {
      hex: '',
      rgba: [0, 0, 0, 0],
      dispatch: jest.fn(),
    };
    const { container } = render((
      <ColorToolContext.Provider value={state}>
        <HexInput />
      </ColorToolContext.Provider>
    ));
    const input = container.querySelector('input');

    fireEvent.change(input, { target: { value: testHex } });

    expect(state.dispatch).toHaveBeenCalledWith(updateHex(testHex));
  });
});