Question

背景：在此链接Custom Prompt之后创建了一个自定义提示，根据我的需要进行了一些修改，并且可以为我的应用程序查找注意我正在使用react 16.4+钩子实现

我不确定组件是否是带有“框”的Material UI Modal组件也很重要，该框也有两个按钮，一个用于停留，一个用于离开

我不知道要如何测试。我们使用Jest酶进行测试（不，我不能只使用集成测试。在项目中，单元测试代码的覆盖范围非常重要）

import { mount, ReactWrapper } from 'enzyme';
import React from 'react';
import { Provider } from 'react-redux';
import { act } from 'react-dom/test-utils';
import { MemoryRouter, Link } from 'react-router-dom';
import RouteBlocker from './RouteBlocker';

describe('RouteBlocker test', () => {
  let wrapper: ReactWrapper;
  describe('Contains data', () => {
    beforeEach(async () => {
      await act(async () => {
        wrapper = mount(
          <MemoryRouter initialEntries={['/test/1/form/test1']}>
                  <div>
                    <RouteBlocker
                      when={true}
                      modalContent="test Content"
                      modalTitle="test Title"
                    />
                    <Link to="/test"> test</Link>
                  </div>
          </MemoryRouter>
        );
      });
    });

    it('modal Appears', () => {
      wrapper.find('a').simulate('click');
      wrapper.update();
      // wrapper.find('Button[id=').simulate('click');
      expect(wrapper).toMatchSnapshot();
    });
});

这确实创建了快照，但RouteBlocker并未完全与需要交互的按钮一起渲染模态，而将其封装在forwardRef中，而我无法访问它来获得所需的“难以捉摸的” 90％覆盖率对于任何好奇的人，快照的这一部分都是这样的：

  <RouteBlocker
    modalContent="test Content"
    modalTitle="test Title"
    when={true}
  >
    <Prompt
      message={[Function]}
      when={true}
    >
      <Lifecycle
        message={[Function]}
        onMount={[Function]}
        onUnmount={[Function]}
        onUpdate={[Function]}
      />
    </Prompt>
    <ForwardRef(Modal)
      open={false}
    />
  </RouteBlocker>

使用酶和玩笑测试自定义反应路由器提示

0 个答案: