@ bigtest/反应

反应 DOM 帮助测试大项

这是什么?

这一一揽子计划旨在提供一套帮助,以方便: 接受测试您的反应应用程序.

这个 mount 帮助者在将组件安装到 刚插入的 DOM 节点 。 以后的用途会清理之前的任何用途 挂载组件.

import { mount } from '@bigtest/react';
import Button from '../src/components/button';

describe('My Button', () => {
  // `mount` returns a promise that resolves after rendering
  beforeEach(() => mount(() => <Button/>));

  it('renders', () => {
    expect(document.querySelector('.button')).to.exist;
  });
});

这个 setupAppForTesting 帮助不仅挂载应用程序 组件,但将以组件实例解决 提供内存历史对象 反应 路由器 用于 测试.

import { setupAppForTesting } from '@bigtest/react';
import App from '../src/app';

describe('My Application', () => {
  let app;

  beforeEach(async () => {
    app = await setupAppForTesting(App);
  });

  it('renders', () => {
    expect(document.querySelector('#app')).to.exist;
  });

  it('has a history prop', () => {
    // this prop is only provided if defined in `propTypes`
    expect(app.props).to.have.property('history');
  });
});

这个 visit 帮助者( e)visit, (中文(简体) ), goBack, (中文(简体) ), goForward,以及 location(中文(简体) ) 仅使用后工作 setupAppForTesting 和接口 应用程序的 history 航道之间的道具.

import { setupAppForTesting, visit, location } from '@bigtest/react';
import App from '../src/app';

describe('My Application', () => {
  beforeEach(() => setupAppForTesting(App));

  describe('navigating', () => {
    beforeEach(() => visit('/some-route'));

    it('is at the new route', () => {
      expect(location()).to.have.property('pathname', '/some-route');
    });
  });
});

这个 cleanup 帮助器在每次的开始时被调用 mount 财务报告和审定财务报表 setupAppForTesting 调用以清理任何先前挂载的组件 或申请。 如果你需要清洁,也可以自己用 上面的前置组件你自己.

import { mount, cleanup } from '@bigtest/react';
import Button from '../src/components/button';

describe('My Button', () => {
  beforeEach(() => mount(() => <Button/>));

  // it's best not to do this so that you can investigate and play
  // with your component for debugging purposes after a test runs
  afterEach(() => cleanup());

  // ...
});

选项

两者 mount 财务报告和审定财务报表 setupAppForTesting 接受散列 options 作为 第二个论点.

mount(Component, {
  // used as the ID of the newly inserted DOM node
  mountId: 'testing-root',

  // where to insert the new DOM node
  rootElement: document.body,

  // called before the component is mounted; if a promise is returned,
  // the component will mount after it resolves
  setup: () => {},

  // called during the next `cleanup` invocation, either at the
  // beginning of the next `mount` or `setupAppForTesting` call, or
  // when invoking `cleanup` directly; like `setup`, any returned
  // promise will cause it to wait until resolving
  teardown: () => {}
})

此外, setupAppForTesting 接受一个 props 选项 将任何用户定义的道具传递到应用程序组件.

setupAppForTesting(App, {
  props: {
    store: createStore(),
    // you can provide your own history object as well
    history: createHistory(historyOptions)
  }
})

可续用性

对于测试您的应用程序时最优化的经验,任何 需要不存在于组件中的应用程序逻辑 寿命周期钩应可再使用。 要么提供 所需资源 setup 财务报告和审定财务报表 teardown 选项,或将逻辑移入 组件生命周期钩.

除此之外,利用 setupAppForTesting 在您自己的测试助手中, 任何其他 有必要的设置被照顾。 也让我们不必 导入我们的应用程序并复制每个测试文件中的设置逻辑 .

// tests/helpers.js
import { setupAppForTesting } from '@bigtest/react';
export { visit, goBack, goForward, location } from '@bigtest/react';

import App from '../src/app';
import createServer from './mocks/server';

export function setupApplicationForTesting() {
  beforeEach(async function () => {
    this.app = await setupAppForTesting(App, {
      setup: () => this.server = createServer(),
      teardown () => this.server.shutdown()
    });
  });
}

更好的测试

虽然这些助手允许您多次挂载您的申请 测试,与您的应用程序交互也可以是麻烦的.

@bigtest/interactor 提供与应用程序各个部分互动的简单方式 任何浏览器,就像一个用户 会与您的应用程序交互。 单位 事实上,可堆肥的相互作用器是测试的完美伴奏 由可堆肥组件制作的应用程序.

import { setupAppForTesting } from '@bigtest/react';

import App from '../src/app';
import HomePageInteractor from './interactors/home';

describe('My Application', () => {
  const home = new HomePageInteractor();
  beforeEach(() => setupAppForTesting(App))

  it('has a fancy button', () => {
    expect(home.button.isPresent).to.be.true;
    expect(home.button.isFancy).to.be.true;
  });
});

看看这个 @bigtest/interactor 还原 获取更多关于互动器的信息,以及它们是如何工作的.