且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何测试使用Jest和Enzyme随时间更新的React组件?

更新时间:2022-12-16 18:47:30

使用完整渲染API,mount(...)


完整DOM渲染对于可能与DOM API交互的组件
的用例非常理想,或者可能需要
命令的完整生命周期才能完全测试组件
(即 componentDidMount 等。)

您可以使用 mount()而不是 shallow()喜欢

import React from 'react';
import { mount, /* shallow */ } from 'enzyme';
import Timer from './index';

describe('Timer', () => {
    it('should decrement timer ', () => {
        jest.useFakeTimers();

        const wrapper = mount(<Timer i={10} />);
        expect(wrapper.text()).toBe("10");
        jest.runOnlyPendingTimers();
        expect(wrapper.text()).toBe("9");

        jest.useRealTimers();
    });
});

或者您可以将其他对象传递给检测它以运行生命周期方法

Or you can pass additional object to shallow to instrument it to run lifecycle methods

  • see ShallowWrapper.js sourcode
  • see shallow() docs

options.disableLifecycleMethods :( Boolean [optional]):如果设置为true,则不会在组件上调用
componentDidMount,并且在调用后不调用
componentDidUpdate setProps和setContext。

options.disableLifecycleMethods: (Boolean [optional]): If set to true, componentDidMount is not called on the component, and componentDidUpdate is not called after setProps and setContext.



const options = {
  lifecycleExperimental: true,
  disableLifecycleMethods: false 
};

const wrapper = shallow(<Timer i={10} />, options);

我测试了它。它有效。

hinok:~/workspace $ npm test

> c9@0.0.0 test /home/ubuntu/workspace
> jest

 PASS  ./index.spec.js (7.302s)
  Timer
    ✓ should decrement timer  (28ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.162s
Ran all test suites.