tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
676 stars 149 forks source link

Change value when testing #134

Closed isofianos-thelist-app closed 2 years ago

isofianos-thelist-app commented 3 years ago

Hello!!

I am trying to change the value of the select to test my overall functionality in a component, but the value does not change, so I need some help. Currently using "react-select-search": "^2.2.0"

import React from 'react';
import { cleanup, render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import SelectSearch from 'react-select-search';

afterEach(cleanup);

const options = [
  { name: 'Swedish', value: 'sv' },
  { name: 'English', value: 'en' },
  {
    type: 'group',
    name: 'Group name',
    items: [{ name: 'Spanish', value: 'es' }],
  },
];

test('<SelectSearch>', () => {
  render(
    <SelectSearch
      options={options}
      value="sv"
      name="language"
      placeholder="Choose your language"
    />
  );

  const select = screen.getByPlaceholderText("Choose your language");
  fireEvent.change(select, { target: { value: 'es' } });
});

I also have tried with no luck fireEvent.change(select, { value: 'es' });

tbleckert commented 2 years ago

You need to use the onChange callback