Question

我正在使用带有React 16的Enzyme 3.我有以下单元测试，它与之前版本的React和Enzyme一起使用，但升级后我收到以下错误

方法“模拟”仅用于在单个节点上运行。 3找到了。

这是代码

it('calls \'onCompleteShoppingClicked\' when the user clicks the button to complete shopping', () => {
    const onCompleteShoppingClickedSpy = sinon.spy();
    const onSaveShoppingClickedSpy = sinon.spy();

    const shppingPathWrapper =
        mount(
            <Provider store={store}>
                <ShoppingPathComponent
                    AppliedShoppingLists={AppliedShoppingListsSampleData}
                    onCompleteShoppingClicked={onCompleteShoppingClickedSpy}
                    onSaveShoppingClicked={onSaveShoppingClickedSpy}
                />
            </Provider>
        );

    const completeShoppingbutton = shppingPathWrapper.find('#completeShoppingbutton');
    completeShoppingbutton.simulate('click');
    expect(onCompleteShoppingClickedSpy.called).toEqual(true);
});

每当我使用find和simulate时，我的其他单元测试也会遇到相同的错误。是否存在一些需要修复的不兼容问题。

Answer 1

Enzyme 3引入了一个新的css解析器，现在可以获取与元素ID相同的prop ID（因为所有元素都是jsx中的对象）

enzyme@3.1.0修补了这个问题，引入了一个主机节点函数，该函数应该只限制返回DOM节点。

wrapper.hostNodes()应将其限制为html，如组件

您可以在此处查看公关https://github.com/airbnb/enzyme/pull/1179

Answer 2

您是否为React 16定义了适配器？

/**
 * Defines the React 16 Adapter for Enzyme. 
 *
 * @link http://airbnb.io/enzyme/docs/installation/#working-with-react-16
 * @copyright 2017 Airbnb, Inc.
 */
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");

enzyme.configure({ adapter: new Adapter() });

我写了关于使用Jest，Enzyme和Typescript配置React 16的帖子，你可以在没有Typescript部分的情况下使用它 - https://medium.com/@mateuszsokola/configuring-react-16-jest-enzyme-typescript-7122e1a1e6e8

酶3不与React 16一起使用

2 个答案: