@commercetools/enzyme-extensions

@ 商业工具/ enzyme- 扩展

你为什么要用这个? 读取: 测试一个Render道具!

页:1 这个软件包用来提供 renderProp 测试帮助器, 其中 现在属于 enzyme 本身 现改为:.

因此我们放弃了 renderProp 在本包的v4.0.0中。 我们建议使用 renderProp 从酶本身取而代之.

记住 aPI 已经改变 同时将函数移动到酶中.

// before
wrapper.renderProp('foo', 10, 20);
// after
wrapper.renderProp('foo')(10, 20);

我们很高兴我们的小帮手 已经做到了 enzyme。 。 。 .

这有什么假设?

• 我们 喜欢浅出 并避免挂起
  • 浅色渲染速度快,并确保您只与 正在测试的单位
  • * * * 浅色渲染可确保您这样做 没有快照过测试的担心
  • 浅色渲染已经显示 表现更强 对我们来说,比起升起
• 我们喜欢 申报成分 财务报告和审定财务报表 渲染道具
  • 我们可以 构成组件 很容易跟随互动
  • 我们喜欢 出击 以测试单个逻辑片段

安装

1. 添加包件

yarn add @commercetools/enzyme-extensions -D

2. 添加测试设置文件( 取决于测试跑道)

对于杰斯特,你会设置 setupTestFrameworkScriptFile。 。 。 . 创建该文件并添加到游戏配置中 .

3. 用此包的帮助扩展酶

在那个 testFrameworkScriptFile 文件,导入扩展名并添加到 Enzyme

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-xx';
import configure from '@commercetools/enzyme-extensions';
import ShallowWrapper from 'enzyme/ShallowWrapper';

// You likely had this part already
Enzyme.configure({ adapter: new Adapter() });

// This is the actual integration.
// Behind the scenes this extends the prototype of the passed in `ShallowWrapper`
configure(ShallowWrapper);

使用量

一旦设置, 您可以使用您测试文件中的扩展名 :

import React from 'react';
import { shallow } from 'enzyme';

describe('when rendering `<App>`', () => {
  const App = () => (
    <div id="app">
      <Mouse
        render={(x, y) => (
          <div>
            Cursor is at {x} {y}
          </div>
        )}
      />
    </div>
  );

  // Here we call the render function defined on Mouse and we provide
  // some custom arguments to it. This means we are effectively mocking
  // the Mouse component's implementation.
  // This is great to keep test concerns separate.
  const wrapper = shallow(<App />)
    .find(Mouse)
    // This is where we are actually using the drill function
    // Since we defined it on the prototype in the Installation step,
    // it does not need to be imported into the test itself.
    // We can call any property dynamically and even derive the property to
    // call depending on the props which are passed as the arguments of the
    // function passed to `drill`.
    .drill(props => props.render(10, 20));

  it('should render the mouse position', () => {
    expect(wrapper.equals(<div>Cursor is at 10 20</div>)).toBe(true);
  });
});

酶 renderProp 用于最常见的病例. 如果你需要更多的控制,你可以使用 drill 换句话说. drill 提供了更大的灵活性,例如:

• 从其他道具中可以得出道具
• 返回的元素可以动态设置

见 drill 文档.

文档

• drill
• until