React-Testing-Library - 在 fireEvent 之后拍摄快照

Question

在调用fireEvent.focus() 后，我无法拍摄快照。

这是测试。我这里有两个测试，1个比较输入聚焦前的快照，1个比较输入聚焦后的快照。

describe("Unit: <OutlinedInput />", (): void => {

  describe("Initial render", (): void => {
    describe("renders as snapshot", (): void => {
      it("for standard fields", (): void => {
        const { asFragment } = render(<OutlinedInput {...standardProps} />, {});
        expect(asFragment()).toMatchSnapshot();
      });
    });
  });

  describe("On focus in, no input", (): void => {
    describe("renders as snapshot", (): void => {
      it("for standard fields", (): void => {
        const { getByLabelText, container, asFragment } = render(
          <OutlinedInput {...standardProps} />,
          {}
        );
        const input = getByLabelText(standardProps.label);
        fireEvent.focus(input);
        waitForDomChange(container)
          .then(
            (): void => {
              expect(asFragment()).toMatchSnapshot();
            }
          )
          .catch((error: Error): void => console.log(error.message));
      });
    });
  });
});

但是当我检查快照时，只创建了 1 个：

exports[`Unit: <OutlinedInput /> Initial render renders as snapshot for standard fields 1`] = `
<DocumentFragment>
  <div
    class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth"
    data-testid="outlinedInputFormControl"
  >
    <label
      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined"
      data-shrink="false"
      data-testid="outlinedInputLabel"
      for="name"
    >
      Name Label
    </label>
    <div
      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense"
      data-testid="outlinedInputInput"
    >
      <fieldset
        aria-hidden="true"
        class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline makeStyles-notchedOutline-6"
        style="padding-left: 8px;"
      >
        <legend
          class="PrivateNotchedOutline-legend-63"
          style="width: 0.01px;"
        >
          <span>
            ​
          </span>
        </legend>
      </fieldset>
      <input
        aria-invalid="false"
        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
        id="name"
        type="string"
        value=""
      />
    </div>
  </div>
</DocumentFragment>
`;

似乎asFragment 是在组件的初始渲染期间创建的，fireEvent.focus(input) 没有更新。这会导致两个快照相同，我猜 React-Testing-Library 仅因此创建 1 个快照。

应该会创建 2 个快照。第二个测试的一个（具有fireEvent.focus(input)）应该为各种组件具有不同的类。例如，<label> 元素应该有一个额外的 Mui-Focused 类，我可以看到当我在浏览器中运行我的应用程序时会发生什么。

我该如何解决这个问题？

Answer 1

我让它工作了。显然，您不应该在比较快照之前等待 DOM 更新。

这是所做的更改：

  describe("On focus in, no input", (): void => {
    describe("renders as snapshot", (): void => {
      it("for standard fields", (): void => {
        const { getByLabelText, asFragment } = render(
          <OutlinedInput {...standardProps} />,
          {}
        );
        const input = getByLabelText(standardProps.label);
        fireEvent.focus(input);
        expect(asFragment()).toMatchSnapshot();
      });
    });
  });