Question 186056 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to update props using @testing-library/react

I’m newbie who have never used jest library (@testing-library). I just wonder that is it possible to update props in test code.

Here is my Sample tsx code :


const Dropdown : React.FC<IDropdownProps> = ({initialValue, items, selected, onSelect}) => {
    return (
        <div>
            <div data-testid="test-dropdown">{selected || initialValue}</div>
                <ul>
                    {items.map((el) => {
                        return (
                            <li 
                                key={"a" + el.id} 
                                onClick={onSelect}
                                role="list"
                                >
                                {el.name}
                            </li>
                        )
                    })}
                </ul>
        </div>
    )
}

Here is my test code :

const items = [{id : 1, name : "1"},{id : 2, name : "2"}];
const initialValue = "Select"

test("Testing", () => {
    const onSelectMock = jest.fn();

    expect(screen.getByTestId('test-dropdown')).toHaveTextContent('Select');
    const obj = render(<Dropdown items={items} initialValue={initialValue} onSelect={onSelectMock(items[1])} />);

    fireEvent.click(el[1]);

    expect(screen.getByTestId('test-dropdown')).toHaveTextContent('2');
});

After firing the event, I wanna update selected props, change it "Select" to "2", which is the property of Dropdown component.

If it is wrong, would you please recommend me to testing way?

Tags:

2

Answers


  1. 0

    You can use the rerender method exposed by your render call:

    const {rerender} = render(<NumberDisplay number={1} />)

// re-render the same component with different props
rerender(<NumberDisplay number={2} />)

    You can also check the testing library doc here

    Login or Signup to reply.
  2. 0

    You can check bellow approach to test your call back function dynamically. and trigger rerender

    expect(getByTestId('test-dropdown')).toHaveTextContent('2');

    const Dropdown = ({ initialValue, items, selected, onSelect }) => {
  return (
    <div>
      <div data-testid='test-dropdown'>{selected || initialValue}</div>
      <ul>
        {items.map((el) => {
          return (
            <li key={'a' + el.id} data-testid={'a' + el.id} onClick={() => onSelect(el.id)} role='list'>
              {el.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

const items = [
  { id: 1, name: '1' },
  { id: 2, name: '2' },
];
const initialValue = 'Select';

test('Testing', async () => {
  let selected = undefined;
  const onSelectMock = (value) => {
    selected = value;
  };

  const { rerender, getByTestId } = render(
    <Dropdown
      items={items}
      initialValue={initialValue}
      onSelect={(e) => {
        onSelectMock(e);
      }}
      selected={selected}
    />,
  );

  expect(getByTestId('test-dropdown')).toHaveTextContent('Select');

  fireEvent.click(getByTestId('a2'));

  rerender(
    <Dropdown
      items={items}
      initialValue={initialValue}
      selected={selected}
      onSelect={(e) => {
        onSelectMock(e);
      }}
    />,
  );

  expect(getByTestId('test-dropdown')).toHaveTextContent('2');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search