@atlaskit/select and jest

Jira Development Jira Cloud
, ,
1

Hi,

I want test my Select with a jest test, but I can’t find a way to get the options from the Select.

Here one example, how it can be work, but the Select component don’t support data-testId

or testID

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import App from './App';

test('Simulates selection', () => {
  const { getByTestId, getAllByTestId } = render(<App />);
  //The value should be the key of the option
  fireEvent.change(getByTestId('select'), { target: { value: 2 } })
  let options = getAllByTestId('select-option')
  expect(options[0].selected).toBeFalsy();
  expect(options[1].selected).toBeTruthy();
  expect(options[2].selected).toBeFalsy();
  //...
})

@nhac.tat.nguyen: perhaps you have an idea.

Thank to all for the help

2

Hi,

I found a way to test a Select with jest. Here my solution, but the the onChange test I get a Warning com Act()

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable @typescript-eslint/no-use-before-define */
import { OptionType } from '@atlaskit/select';
import {
  act, render, screen, RenderResult,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { wait } from '@testing-library/user-event/dist/utils';
import React from 'react';
import Selection from './Selection';

describe('Selection', () => {
  test('init component should not fail', async () => {
    const { sut } = makeSUT();

    expect(sut.container).not.toBeNull();
  });

  test('Selection should be have the correct number of options', async () => {
    const leftClick = { button: 0 };
    const { options } = makeSUT();
    const selection = screen.getByLabelText('Selection');

    // open all option
    // act(() => {
    userEvent.click(selection, leftClick);
    // });
    await wait();

    options.forEach(async (option, index) => {
      if (index === 0) {
        expect((await screen.findAllByText(option.label)).length).toEqual(2);
      } else {
        expect((await screen.findAllByText(option.label)).length).toEqual(1);
      }
    });
  });

  test('onChange should change Selection defaultValue', async () => {
    const leftClick = { button: 0 };
    const onChange = jest.fn();
    makeSUT(onChange);
    const selection = await screen.findByLabelText('Selection');
    act(() => {
      userEvent.click(selection, leftClick);
    });
    await wait();

    const selected = screen.getByText('Sean Curtis');
    expect(selected).toBeInTheDocument();
    act(() => {
      userEvent.click(screen.getByText('Sean Curtis'), leftClick);
    });

    expect(onChange).toHaveBeenCalledTimes(1);
  });

  // helpers

  // eslint-disable-next-line no-unused-vars
  function makeSUT(onChange: (e: OptionType | null) => void = () => {}):
  ({options: OptionType[], sut: RenderResult}) {
    const options = [
      { label: 'Atlassian', value: 'atlassian' },
      { label: 'Sean Curtis', value: 'scurtis' },
      { label: 'Mike Gardiner', value: 'mg' },
      { label: 'Charles Lee', value: 'clee' },
    ];
    const sut = render(<Selection
      label="Selection"
      value={options[0]}
      options={options}
      onChange={onChange}
    />);

    return { options, sut };
  }
});

Waring is this. I was not able to fix it.

console.error
    Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one.