时间戳

首页 > 解决方案 > 在 reactjs 酶测试中，围绕测试渲染器和模拟事件包装 act 方法的正确方法是什么

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

问题描述

我找到了一些区分 test-renderer 和 react-dom/utils 的在线示例，但它仍然显示烦人的警告消息。

参考：

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;

组件.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() 匹配版本：

标签： reactjsreact-domreact-test-renderer

解决方案

推荐阅读