在 reactjs 酶测试中围绕测试渲染器和模拟事件包装行为方法的正确方法是什么

问题描述

我在网上找到了一些区分 test-renderer 和 react-dom/utils 的例子，但它仍然显示恼人的警告信息。

参考文献：

• https://someweb.github.io/reactjs/unit-testing-reactjs/
• https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
• https://codesandbox.io/s/k14k63y03v?file=/src/index.spec.js:377-475

WrapProvider.tsx

import React,{ FC } from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import store,{ history } from 'src/store/getStore';
import MasterWrap from 'src/Main/MasterWrap';

// Note: adding MasterWrap is what is breaking test-renderer ..

const WrapProvider: FC = ({ children }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <MasterWrap>{children}</MasterWrap>
    </ConnectedRouter>
  </Provider>
);

export { store,history };
export default WrapProvider;

Component.test.tsx

import React from 'react';
import { mount } from 'enzyme';
import renderer,{ act as actRenderer } from 'react-test-renderer';
import { act as actMount } from 'react-dom/test-utils';
import WrapProvider,{ store } from '__tests__/__utils__/WrapProvider';
import ButtonShare from 'stories/ButtonShare/_ButtonShare';
import { ANIMATION_DURATION } from 'src/config';

let wrapper: any;
let tree: any;

const dataTestId = 'btn-share-controls-dialog__create-account';

const dialogName = 'create-account';

describe('Story - ButtonShare',() => {
  beforeAll(() => {
    actRenderer(() => {
      tree = renderer
        .create(
          <WrapProvider>
            <ButtonShare />
          </WrapProvider>
        )
        .toJSON();
    });
    actMount(() => {
      wrapper = mount(
        <WrapProvider>
          <ButtonShare />
        </WrapProvider>
      );
    });
  });
  describe('Onload',() => {
    it('should match snapshot - or refactor test',() => {
      expect(tree).toMatchSnapshot();
    });
    it('should contain - button',() => {
      const $btn = wrapper.find(`[data-testid="${dataTestId}"]`);
      expect($btn.exists()).toBe(true);
    });
    it('should contain - button with aria-pressed = false',() => {
      const $btn = wrapper.find(`[data-testid="${dataTestId}"]`).first();
      expect($btn.prop('aria-pressed')).toBe(false);
    });
  });

// This is the section which is breaking the test. 
// However,if I remove test renderer above,and do not test agains the snapshot then it also does not show warning.
  describe('Click button',() => {
    beforeAll(async () => {
      const $btn = wrapper.find(`[data-testid="${dataTestId}"]`).first();

      actMount(() => {
        $btn.simulate('click');
      });

      await new Promise(resolve => {
        setTimeout(() => {
          wrapper.update();
          resolve(true);
        },ANIMATION_DURATION + 1);
      });
    });
    it('should contain - dialog-bg',() => {
      expect(wrapper.find(`[data-testid="dialog-bg-${dialogName}"]`).exists()).toBe(true);
    });
  });
})

警告：看起来您在测试交互中使用了错误的 act()。 请务必使用与您的渲染器对应的匹配版本的 act()：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）