3

I have a test where I'm simulating a user typing into a Material UI Autocomplete field. When I run the test using karma start karma.conf.js --single-run everything works fine, but when the tests are running in continuous mode (e.g, after a file is edited), it fails due to the Autocomplete input resetting after every keystroke.

I'm using Jasmine for my test framework, Karma as the runner, and React Testing Library for the rendering/user input.

My component code looks something like this:

function App() {
  return (
    <div className="App">
      <Autocomplete
          id="combo-box-demo"
          options={topFilms}
          onInputChange={(e, val, reason) => {
            console.log(`input value: "${val}"`);
            console.log(`reason: "${reason}"`);
          }}
          renderInput={(params) => <TextField {...params} label="Movie" />}
      />
    </div>
  );
}

And my test is like:

describe('App test', () => {
  it('renders autocomplete', async () => {
    const {getByRole} = render(<App />);
    // Get Autocomplete input box.
    const ac = getByRole('textbox');
    // Type some text.
    await userEvent.type(ac, 'Hello!');

    expect(ac.value).toBe('Hello!');

    // When Karma browser window doesn't have focus, every key press resets the
    // input value due.
  });
})

Now, when I run w/ --single-run the input gets populated as I would expect and I see console.log output like:

LOG: 'input value: "H"'
LOG: 'reason: "input"'
LOG: 'input value: "He"'
LOG: 'reason: "input"'
LOG: 'input value: "Hel"'
LOG: 'reason: "input"'
LOG: 'input value: "Hell"'
LOG: 'reason: "input"'
LOG: 'input value: "Hello"'
LOG: 'reason: "input"'
LOG: 'input value: "Hello!"'
LOG: 'reason: "input"'

But when I have it in continuous mode and edit something, triggering a refresh, it fails with logs like:

LOG: 'input value: "H"'
LOG: 'reason: "input"'
LOG: 'input value: ""'
LOG: 'reason: "reset"'
LOG: 'input value: "e"'
LOG: 'reason: "input"'
LOG: 'input value: ""'
LOG: 'reason: "reset"'
LOG: 'input value: "l"'
LOG: 'reason: "input"'
LOG: 'input value: ""'
LOG: 'reason: "reset"'
LOG: 'input value: "l"'
LOG: 'reason: "input"'
LOG: 'input value: ""'
LOG: 'reason: "reset"'
LOG: 'input value: "o"'
LOG: 'reason: "input"'
LOG: 'input value: ""'
LOG: 'reason: "reset"'
LOG: 'input value: "!"'
LOG: 'reason: "input"'
LOG: 'input value: ""'
LOG: 'reason: "reset"'

Notice a 'reset' happens after every keystroke, clearing out the input field.

What would be different about --single-run vs continuous mode that would cause this behavior?

Thanks in advance!

Edit: Minimal repro case at https://github.com/joeltine/mui-autocomplete-karma-bug-repro. Just npm install and run tests with npx karma start karma.conf.js. Edit the App.test.js file to see the bug. This seems to be some kind of issue with browser window focus. A --single-run forces focus on the browser window, but continuous runs do not necessarily have focus.

8
  • From the docs, singleRun actually is continuous integration mode. Feb 25, 2022 at 7:16
  • OK, is that a clue to fix the problem? Or just a correction of my question?
    – joeltine
    Feb 25, 2022 at 16:51
  • please provide a MRE or at least the package.json and karma.conf.js so we can reproduce the issue
    – diedu
    Feb 26, 2022 at 5:38
  • @joeltine how are you running the continuous mode? Feb 28, 2022 at 5:22
  • karma start my.conf.js
    – joeltine
    Feb 28, 2022 at 14:43

1 Answer 1

4

You can solve it with clearOnBlur={false}:

<Autocomplete
    id="combo-box-demo"
    clearOnBlur={false}
    options={topFilms}
    onInputChange={(e, val, reason) => {
      console.log(`input value: "${val}"`);
      console.log(`reason: "${reason}"`);
    }}
    renderInput={(params) => <TextField {...params} label="Movie" />}
/>

By default, Autocomplete clears the input field on blur (a.k.a. when it loses focus) if the text entered doesn't match any of its options, which is the case here - your test types Hello!, but there are no options with that string.

Alternatively, you could set freeSolo={true}, but that would allow you to enter anything instead of picking an existing option.

3
  • Thanks, @Fapaz. This does work in so far as the tests will consistently pass. However, it's not the UI functionality I need. I need clearOnBlur=true otherwise the user could type a bad value, blur the field, and the input will remain populated with an incomplete value.
    – joeltine
    Mar 12, 2022 at 22:30
  • I'm having a hard time figuring out whose bug this is, if anyone's. Doesn't feel like it's MUI. It almost feels like a browser issue. Why would a browser force a blur on every keystroke, regardless of what the window focus state is? Maybe the testing library is doing something weird?
    – joeltine
    Mar 12, 2022 at 22:34
  • @joeltine It does seem like the webview launched by Karma is the one to blame. For some reason it's losing and regaining the focus on each key typed, which is making the Autocomplete trigger its clear function.
    – Fappaz
    Mar 14, 2022 at 5:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.