Use a Real MutationObserver Shim when Testing

When attempting to use this library with @testing-library/react I was having issues where calling a useState update in my submit callback was not being seen by the test runner. I used the information in https://github.com/react-hook-form/react-hook-form/issues/260 to get started. I could still log the updates in the component so it didn’t seem to be a component problem.

I ended up adding https://github.com/megawac/MutationObserver.js/tree/master and this solved my problem. Assuming you agree with my analysis, the samples should be updated to reflect this. It took me quite some time to track the issue down.

Relevant repro code below

// Form.jsx

import * as React from 'react';

import {useState} from 'react';

import useForm from 'react-hook-form';

const Form = () => {
  const { register, handleSubmit, errors } = useForm(); // initialise the hook
  
  const [val, setVal] = useState(false);

  const onSubmit = (data) => {

    setVal(true);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input data-testid="myinput" name="myinput" ref={register} /> {/* register an input */}
      
      <button type="submit" data-testid="login-submit"> Login </button>

      {val && <div data-testid="my-res"> Value Set! </div>}
    </form>
  );
};

export default Form;


// Form.test.jsx

import React from 'react';

import { render, cleanup, fireEvent } from '@testing-library/react';

import Form from './Form';

afterEach(cleanup);

beforeEach(() => {

  // This does not work
  global.MutationObserver = class {
    constructor() {}
    disconnect() {}
    observe() {}
  };

  // // This will!
  // require('mutationobserver-shim');
});

describe('React-Hook-Form + setSTate', () => {

  it('Displays the updated value', async () => {

    const { getByTestId, findByTestId } = render(<Form />);

    const myinput = getByTestId(/myinput/i);

    const submitButon = await findByTestId('login-submit');

    fireEvent.change(myinput, { target: { value: 'set random input' } });

    fireEvent.click(submitButon);

    await findByTestId('my-res')
  });

});

[stramel]

@b-wils It is in a global jest setup file, https://github.com/react-hook-form/react-hook-form/blob/6d908eeb81cc551fd7d2f3aa1901cfd9197e1199/setup.ts#L1

[thainararogerio]

For those who came into this post nowadays, there is no need to use cleanup anymore if you are using mocha, Jest or Jasmine: https://testing-library.com/docs/react-testing-library/api#cleanup