web-dev-qa-db-fra.com

React bibliothèque de tests lors du changement du composant Material UI Select

J'essaie de tester l'événement onChange d'un Select component en utilisant react-testing-library .

J'attrape l'élément en utilisant getByTestId qui fonctionne très bien, puis je définis la valeur de l'élément et j'appelle fireEvent.change(select); mais le onChange n'est jamais appelé et l'état n'est jamais mis à jour.

J'ai essayé d'utiliser à la fois le composant select lui-même et également en saisissant une référence à l'élément input sous-jacent, mais aucun ne fonctionne.

Des solutions? Ou s'agit-il d'un problème connu?

reactjsmaterial-uireact-testing-library
5
Rob Sanders
import * as React from "react";
import ReactDOM from 'react-dom';
import * as TestUtils from 'react-dom/test-utils';
import { } from "mocha";

import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

let container;

beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container = null;
});

describe("Testing Select component", () => {

    test('start empty, open and select second option', (done) => {

        //render the component
        ReactDOM.render(<Select
            displayEmpty={true}
            value={""}
            onChange={(e) => {
                console.log(e.target.value);
            }}
            disableUnderline
            classes={{
                root: `my-select-component`
            }}
        >
            <MenuItem value={""}>All</MenuItem>
            <MenuItem value={"1"}>1</MenuItem>
            <MenuItem value={"2"}>2</MenuItem>
            <MenuItem value={"3"}>3</MenuItem>
        </Select>, container);

        //open filter
        TestUtils.Simulate.click(container.querySelector('.my-select-component'));

        const secondOption = container.ownerDocument.activeElement.parentElement.querySelectorAll('li')[1];
        TestUtils.Simulate.click(secondOption);

        done();

    });
});
0
Ivan Valadares
it('Set min zoom', async () => { 
  const minZoomSelect = await waitForElement( () => component.getByTestId('min-zoom') );
  fireEvent.click(minZoomSelect.childNodes[0]);

  const select14 = await waitForElement( () => component.getByText('14') );
  expect(select14).toBeInTheDocument();

  fireEvent.click(select14);

});
0
khousuylong