反應-使用設置功能進行單元測試

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 ，請使用Object.assign通過參數的Object.assign擴展安裝程序中的默認Object.assign 。

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