Enzyme Mount/Shallow 在上钩之前打开一次

Question

我有一个组件，我安装/浅化每个测试用例，我发现这是多余的。在before钩子上安装一次是个好主意吗？或者我以后可能会遇到什么问题，特别是如果我要在我的组件上设置状态或道具？

例如：

import React from 'react';
import {mount,shallow} from 'enzyme';
import {expect} from 'chai';
import ScheduleApp from '../src/components/schedule-app.jsx';
import ScheduleForm from '../src/components/schedule-form.jsx';
import ScheduleTable from '../src/components/schedule-result-table.jsx';

describe('<ScheduleApp/>', function() {
  describe('Initial Mount', function() {
    let wrapper;

    before(function() {
      wrapper = mount(<ScheduleApp />);
    });

    it('contains 1 <ScheduleForm/> component', function() {
      expect(wrapper.find(ScheduleForm)).to.have.length(1);
    });

    it('contains 1 <ScheduleTable/> component', function() {
      expect(wrapper.find(ScheduleTable)).to.have.length(1);
    });
  });
});

Answer 1

如果您不打算使用不同的 props 测试 Schedule App，则无需为每种情况都安装它。

您也不需要导入子组件（ScheduleForm 和 ScheduleTable）来告诉酶找到它们。 Enzyme finds child components by their display name.

你可以将上面的代码重构为

import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import ScheduleApp from '../src/components/schedule-app.jsx';

describe('<ScheduleApp/>', function() {
  describe('Initial Mount', function() {
    const wrapper = mount(<ScheduleApp />);

    it('contains 1 <ScheduleForm /> component', function() {
      expect(wrapper.find('ScheduleForm')).to.have.length(1);
    });

    it('contains 1 <ScheduleTable /> component', function() {
      expect(wrapper.find('ScheduleTable')).to.have.length(1);
    });
  });
});