Jestjs React测试库-在fireEvent之后拍摄快照

调用

fireEvent.focus（）

后，我无法拍摄快照

这是测试。我这里有两个测试，一个是在输入被聚焦之前比较快照，另一个是在输入被聚焦之后比较快照

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));
      });
    });
  });
});

description（“单位：”，（）：void=>{
描述（“初始渲染”），（）：void=>{
描述（“呈现为快照”），（）：void=>{
它（“对于标准字段”，（）：void=>{
const{asFragment}=render（，{}）；
expect（asFragment（））.toMatchSnapshot（）；
});
});
});
描述（“聚焦于，无输入”），（）：void=>{
描述（“呈现为快照”），（）：void=>{
它（“对于标准字段”，（）：void=>{
const{getByLabelText，容器，asFragment}=render(
,
{}
);
常量输入=getByLabelText（standardProps.label）；
firevent.focus（输入）；
waitForDomChange（容器）
.那么(
（）：void=>{
expect（asFragment（））.toMatchSnapshot（）；
}
)
.catch（（错误：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>
`;

exports[`Unit:Initial render呈现为标准字段1`]的快照=`
姓名标签
​
`;

似乎

asFragment

是在组件的初始渲染期间创建的，并且没有通过

firevent.focus（input）

进行更新。这会导致两个快照完全相同，因此我猜React测试库只创建了1个快照

应该创建两个快照。第二个测试（具有

fireEvent.focus（input）

）的测试对于不同的组件应该具有不同的类。例如，

元素应该有一个额外的类

Mui-Focused

，我可以看到当我在浏览器中运行我的应用程序时会发生什么

---

如何修复此问题？

我已使其正常工作。显然，在比较快照之前，您不需要等待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();
      });
    });
  });

description（“聚焦在中，无输入”），（）：void=>{
描述（“呈现为快照”），（）：void=>{
它（“对于标准字段”，（）：void=>{
常量{getByLabelText，asFragment}=render(
,
{}
);
常量输入=getByLabelText（standardProps.label）；
firevent.focus（输入）；
expect（asFragment（））.toMatchSnapshot（）；
});
});
});

这真的很酷：）我整天都在寻找这样的解决方案。