Question

我有以下情况：

describe('API - Input component', () => {
   describe('Input element', () => {
    it('should have a modifier to its class if data entered is erroneous', () => {
      const wrapper = shallow(<Input error="Invalid data" />);

      expect(wrapper.find('input').props().className).toBe('form-field__input form-field__input--error');
    });
  });
});

这完全没问题。只要我将一些数据传递给我的错误道具，就应该预期修饰符类并且测试通过。

现在，我想实现相同的功能，但使用设置功能。像这样：

function setup () {
  const props = {
    error: {}
  };

  return shallow(<Input {...props} />);
}

describe('API - Input component', () => {
   describe('Input element', () => {
    it('should have a modifier to its class if data entered is erroneous', () => {
      const wrapper = setup(how do I pass my props here?!);

      expect(wrapper.find('input').props().className).toBe('form-field__input form-field__input--error');
    });
  });
});

谢谢！

Answer 1

const wrapper = setup（我如何在这里传递道具？！）;

答案只是道具本身为文字对象 {prop1: value1, prop2: value2 ,... , propN: valueN}：

  const wrapper = setup({error: 'Invalid data'});

知道假设setup应该是：

function setup (props) {
  return shallow(<Input {...props} />);
}

如果您想在安装程序中使用默认道具，请使用Object.assign使用参数道具扩展安装程序中的默认道具。

function setup (props) {
  const defaultPropsOfSetup = {
    error : 'Invalid error'
  };
  props = Object.assign(defaultPropsOfSetup, props); 
  return shallow(<Input {...props} />);
}

React - 使用设置功能进行单元测试

1 个答案: