4

Chào mừng trở lại! Nếu bạn bỏ lỡ Phần 1, bạn có thể xem tại đây !

Ví dụ về kiểm tra

Hãy chuyển sang các ví dụ và bao gồm các thành phần với các thử nghiệm được mô tả trong bài viết trước, từng bước một.

1. Kiểm tra một thành phần từ các hình thức / đầu vào

Lấy một thành phần từ thư mục Forms / input; hãy để nó là DateInput.js, thành phần cho trường datepicker.

Danh sách mã cho thành phần được thử nghiệm:  DateInput.js

Giống như:

Thành  DateInput phần này sử dụng công cụ valueToDate hẹn giờ phản ứng với hai tiện ích:  (chuyển đổi giá trị thành ngày) và  dateToValue ngược lại, đó là gói thời điểm để thao tác ngày và PropTypes để kiểm tra đạo cụ React.

Theo mã thành phần, chúng ta có thể thấy danh sách các đạo cụ mặc định - và, với sự trợ giúp mà thành phần sẽ được hiển thị:

const defaultProps = {  
    inputClassName: 'input-custom',
    monthsShown: 1,
    dateFormat: 'DD.MM.YYYY',
    showMonthYearsDropdowns: false,
    minDate: moment()
};

Tất cả các đạo cụ đều phù hợp để tạo ảnh chụp nhanh, ngoại trừ một:  minDate: moment() -  moment() sẽ cung cấp cho chúng tôi ngày hiện tại mỗi lần chúng tôi chạy thử nghiệm và ảnh chụp nhanh sẽ thất bại vì nó lưu trữ một ngày lỗi thời. Một giải pháp là giả định giá trị này:

const defaultProps = {  
    minDate: moment(0)
}

Tôi cần chỗ dựa này  minDate trong mỗi thành phần được kết xuất; để tránh trùng lặp đạo cụ, tôi tạo HOC nhận  defaultProps và trả về một thành phần đẹp:

import TestDateInput from '../DateInput';  
const DateInput = (props) =>  
    <TestDateInput
        {...defaultProps}
        {...props}
    />;

Đừng quên  moment-timezone, đặc biệt là nếu các bài kiểm tra của bạn sẽ được điều hành bởi các nhà phát triển từ một quốc gia khác ở múi giờ khác. Họ sẽ nhận được một giá trị giả, nhưng với sự thay đổi múi giờ. Giải pháp là đặt múi giờ mặc định:

const moment = require.requireActual('moment-timezone').tz.setDefault('America/Los_Angeles')  

Bây giờ, thành phần đầu vào ngày đã sẵn sàng để thử nghiệm. 

1. Tạo ảnh chụp nhanh trước:

it('render correctly date component', () => {  
    const DateInputComponent = renderer.create(<DateInput />).toJSON();
    expect(DateInputComponent).toMatchSnapshot();
});

2. Đạo cụ kiểm tra:

Dự phòng đầu tiên để kiểm tra là  showMonthYearsDropdowns và nếu nó được đặt thành đúng, thì việc thả xuống theo tháng và năm được hiển thị:

it('check month and years dropdowns displayed', () => {  
    const props = {
            showMonthYearsDropdowns: true
        },
        DateInputComponent = mount(<DateInput {...props} />).find('.datepicker');
    expect(DateInputComponent.hasClass('react-datepicker-hide-month')).toEqual(true);
});

Kiểm tra giá trị prop null; kiểm tra này là cần thiết để đảm bảo thành phần được hiển thị mà không có giá trị xác định:

it('render date input correctly with null value', () => {  
    const props = {
            value: null
        },
        DateInputComponent = mount(<DateInput {...props} />);
    expect((DateInputComponent).prop('value')).toEqual(null);
});

3. Kiểm tra các nguyên mẫu cho giá trị - ngày dự kiến ​​là một chuỗi:

it('check the type of value', () => {  
    const props = {
            value: '10.03.2018'
        },
        DateInputComponent = mount(<DateInput {...props} />);
    expect(DateInputComponent.prop('value')).toBeString();
});

4. Sự kiện thử nghiệm:

4.1.  Kiểm tra sự kiện onChange, để biết giả lập cuộc gọi lại đó => kết xuất thành phần đầu vào ngày => sau đó mô phỏng sự kiện thay đổi với giá trị đích mới => và cuối cùng kiểm tra xem sự kiện onChange đã được gọi với giá trị mới chưa.

it('check the onChange callback', () => {  
    const onChange = jest.fn(),
        props = {
            value: '20.01.2018',
            onChange
        },
        DateInputComponent = mount(<DateInput {...props} />).find('input');
    DateInputComponent.simulate('change', { target: {value: moment('2018-01-22')} });
    expect(onChange).toHaveBeenCalledWith('22.01.2018');
});

4.2.  Đảm bảo cửa sổ bật lên datepicker mở sau khi nhấp vào đầu vào ngày. Đối với điều đó, tìm ngày nhập = = mô phỏng sự kiện nhấp => và mong đợi cửa sổ bật lên với lớp  .react-datepicker hiện tại.

it('check DatePicker popup open', () => {  
    const DateComponent = mount(<DateInput />),
        dateInput = DateComponent.find("input[type='text']");
    dateInput.simulate('click');
    expect(DateComponent.find('.react-datepicker')).toHaveLength(1);
});

Mã kiểm tra đầy đủ:  DateInput.test.js

2. Kiểm tra tiện ích

Mã cho tiện ích được thử nghiệm:  valueToDate.js

Mục đích của tiện ích này là biến đổi giá trị thành một ngày với định dạng tùy chỉnh. Trước hết, hãy phân tích tiện ích đã cho và xác định các trường hợp chính để thử nghiệm:

1.  Theo mục đích của tiện ích này, nó biến đổi giá trị, vì vậy chúng ta cần kiểm tra giá trị này:

  • Trong trường hợp giá trị không được xác định, chúng tôi cần chắc chắn rằng tiện ích sẽ không trả lại ngoại lệ (lỗi).
  • Trong trường hợp giá trị được xác định, chúng ta cần kiểm tra xem tiện ích có trả về ngày không.

2.  Giá trị trả về phải thuộc về  moment lớp; đó là lý do tại sao nó phải là một thể hiện của  moment.

3.  Đối số thứ hai là  dateFormat; đặt nó là một hằng số trước khi kiểm tra. Đó là lý do tại sao nó sẽ được thông qua trong mỗi thử nghiệm và trả về một giá trị theo định dạng ngày. Có nên thử nghiệm  dateFormat riêng? Tôi cho là không. Đối số này là tùy chọn; nếu chúng ta không thiết lập  dateFormat, tiện ích sẽ không bị hỏng và nó sẽ chỉ trả về một ngày ở định dạng mặc định; đó là một công việc nhất thời, chúng ta không nên kiểm tra các thư viện của bên thứ ba. Như tôi đã đề cập trước đây, chúng ta không nên quên về múi giờ; đó là một điểm rất quan trọng, đặc biệt đối với các nhà phát triển từ các múi giờ khác nhau.

Hãy để mã:

1. Viết một bài kiểm tra cho trường hợp đầu tiên; Khi chúng ta không có giá trị, nó trống rỗng.

const format = 'DD.MM.YYYY';

it('render valueToDate utility with empty value', () => {  
    const value = valueToDate('', format);
    expect(value).toEqual(null);
});

2. Kiểm tra xem giá trị được xác định.

const date = '21.11.2015',  
      format = ‘DD.MM.YYYY’;

it('render valueToDate utility with defined value', () => {  
    const value = valueToDate(date, format);
    expect(value).toEqual(moment(date, format));
});

3. Kiểm tra xem giá trị thuộc về lớp khoảnh khắc.

const date = '21.11.2015',  
    format = 'DD.MM.YYYY';

it('check value is instanceof moment', () => {  
    const value = valueToDate(date, format);
    expect(value instanceof moment).toBeTruthy();
});

Mã kiểm tra đầy đủ:  valueToDate.test.js

3. Kiểm tra Widgets

Để kiểm tra widget, tôi đã sử dụng thành phần spinner. 

Danh sách mã cho widget đã kiểm tra:  Spinner.js

Giống như:

Spinner không yêu cầu giải thích, vì hầu như tất cả các tài nguyên web đều có thành phần này. 
Vì vậy, hãy để viết bài kiểm tra:

1. Bước đầu tiên - tạo ảnh chụp nhanh:

it('render correctly Spinner component', () => {  
   const SpinnerComponent = mount(<Spinner />);
   expect(SpinnerComponent).toMatchSnapshot();
});

2. Đạo cụ kiểm tra:

2.1  Tiêu đề chống đỡ mặc định, kiểm tra xem nó có hiển thị chính xác không.

it('check prop title by default', () => {  
 const SpinnerComponent = mount(<Spinner />);
    expect(SpinnerComponent.find('p').text()).toEqual('Please wait');
});

2.2  Kiểm tra tiêu đề chống đỡ tùy chỉnh; Tôi cần kiểm tra xem nó có trả về một prop được xác định chính xác không. Hãy xem mã, tiêu đề được bọc trong tiện  rawMarkup ích và đầu ra với sự trợ giúp của  dangerouslySetInnerHTML tài sản.

Danh sách mã cho các tiện   rawMarkup ích:

export default function rawMarkup(template) {  
    return {__html: template};
}

Chúng ta có cần bao gồm các thử nghiệm cho  rawMarkup trong thành phần spinner không? Không, nó là một tiện ích riêng biệt và nó nên được kiểm tra ngoài spinner. Chúng tôi không quan tâm làm thế nào nó hoạt động; chúng ta chỉ cần biết rằng prop prop trả về kết quả chính xác.

Làm rõ : Lý do sử dụng  dangerouslySetInnerHTML tài sản là như sau: trang web của chúng tôi là đa ngôn ngữ, do đó một nhóm tiếp thị dịch thuật chịu trách nhiệm. Họ có thể dịch một cách đơn giản với sự kết hợp của từ hoặc thậm chí trang trí nó với các thẻ HTML, giống như  <strong><i><s> hoặc thậm chí lát văn bản với danh sách  <ol><ul>; chúng tôi không biết chắc chắn cách họ dịch và trang trí văn bản. Chúng ta chỉ cần kết xuất chính xác tất cả những thứ này.

Tôi đã kết hợp hai trường hợp thử nghiệm chính thành một thử nghiệm:

  • trả lại đúng tiêu đề prop
  • hiển thị chính xác tiêu đề prop với các thẻ HTML
it('check prop title with html tags', () => {  
    const props = {
            title: '<b>Please wait</b>'
        },
        SpinnerComponent = mount(<Spinner {...props} />);
    expect(SpinnerComponent.find('p').text()).toEqual('Please wait');
});

Lấy chỗ dựa tiếp theo ,  subTitle; nó là tùy chọn và đó là lý do tại sao nó không có chỗ dựa mặc định, vì vậy hãy bỏ qua bước này với đạo cụ mặc định và kiểm tra đạo cụ tùy chỉnh:

  • Kiểm tra xem văn bản trong  subTitle prop hiển thị chính xác:
const props = {  
        subTitle: 'left 1 minute'
    },
    SpinnerComponent = mount(<Spinner {...props} />);

it('render correct text', () => {  
    expect(SpinnerComponent.find('p').at(1).text()).toEqual(props.subTitle);
});

Chúng tôi biết rằng đó  subTitle là tùy chọn; đó là lý do tại sao chúng ta cần kiểm tra xem nó không được hiển thị với các đạo cụ mặc định hay không, theo đánh dấu cắt lát. Chỉ cần kiểm tra số lượng thẻ  <p>:

it('check subTitle is not rendered', () => {  
  const SpinnerComponent = mount(<Spinner />);
    expect(SpinnerComponent.find('p').length).toEqual(1);
});

3. Thử nghiệm các loại prop:

  • Đối với đạo cụ tiêu đề, chúng tôi hy vọng nó là một chuỗi:
it('check prop type for title is string', () => {  
    const props = {
            title: 'Wait'
        },
        SpinnerComponent = mount(<Spinner {...props} />);
    expect(SpinnerComponent.find('p').text()).toBeString();
});
  • Đối với  subTitle đạo cụ, chúng tôi cũng dự kiến ​​nó sẽ là một chuỗi:
const props = {  
        subTitle: 'left 1 minute'
    },
    SpinnerComponent = mount(<Spinner {...props} />);

it('type for subTitle is string', () => {  
    expect(SpinnerComponent.find('p').at(1).text()).toBeString();
});

Danh sách kiểm tra đầy đủ:  Spinner.test.js

4. Kiểm tra phương thức (ModalWrapper.js và ModalTrigger.js)

Giống như:

Cách kiểm tra phương thức. 

Trước hết, tôi muốn giải thích cách thức các phương thức được tổ chức trong dự án của chúng tôi. Chúng tôi có hai thành phần:  ModalWrapper.js  và  ModalTrigger.js .

ModalWrapper  chịu trách nhiệm bố trí cửa sổ bật lên. Nó chứa thùng chứa phương thức, nút 'đóng', tiêu đề phương thức và thân máy.

ModalTrigger  chịu trách nhiệm xử lý phương thức. Nó bao gồm bố trí ModalWrapper và chứa các sự kiện để kiểm soát bố cục của phương thức (các hành động mở, đóng).

Chúng ta hãy đi qua từng thành phần riêng biệt:

1. Danh sách mã cho thành phần được thử nghiệm: ModalWrapper.js

Hãy để mã:

1.1  ModalWrapper nhận được một thành phần và kết xuất nó bên trong. Trước hết, hãy kiểm tra xem ModalWrapper sẽ không bị lỗi nếu không có thành phần. Tạo ảnh chụp nhanh với các đạo cụ mặc định:

it('without component', () => {  
    const ModalWrapperComponent = shallow(<ModalWrapper />);
    expect(ModalWrapperComponent).toMatchSnapshot();
});

1.2  Bước tiếp theo là mô phỏng các điều kiện thực tế của nó với kết xuất thành phần được truyền qua các đạo cụ:

it('with component', () => {  
   const props = {
           component: () => {}
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />);
    expect(ModalWrapperComponent).toMatchSnapshot();
});

1.3  Đạo cụ kiểm tra:

Nhận một tên lớp tùy chỉnh prop:

it('render correct class name', () => {  
    const props = {
            modalClassName: 'custom-class-name'
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
        expect(ModalWrapperComponent.hasClass('custom-class-name')).toEqual(true);
});

Nhận một prop tiêu đề tùy chỉnh:

it('render correct title', () => {  
    const props = {
           title: 'Modal Title'
       },
       ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('ModalTitle');
    expect(ModalWrapperComponent.props().children).toEqual('Modal Title');
});

Nhận được một prop hiển thị chính xác:

 it('check prop value', () => {
        const props = {
               show: true
           },
           ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
        expect(ModalWrapperComponent.props().show).toEqual(true);
    });

1.4  Các loại prop thử nghiệm:

  • cho chương trình chống đỡ
it('check prop type', () => {  
    const props = {
           show: true
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
    expect(ModalWrapperComponent.props().show).toBeBoolean();
});
  • cho chỗ dựa
it('render correct onHide prop type', () => {  
    const props = {
            onHide: () => {}
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
    expect(ModalWrapperComponent.props().onHide).toBeFunction();
});
  • cho thành phần chống đỡ
it(‘render correct component prop type’, () => {  
   const props = {
           component: () => {}
       },
       ModalWrapperComponent = mount(<ModalWrapper {...props} />);
   expect(ModalWrapperComponent.props().component).toBeFunction();
});

Danh sách kiểm tra đầy đủ:  ModalWrapper.test.js

2. Danh sách mã cho một thành phần được thử nghiệm:  ModalTrigger.js

Trình bao bọc phương thức đã được bao phủ bằng một bài kiểm tra; phần thứ hai là để bao gồm các thành phần kích hoạt phương thức. 
Tổng quan về thành phần: nó dựa trên trạng thái  toggled biểu thị mức độ hiển thị của  ModalWrapper. Nếu toggled: false, cửa sổ bật lên bị ẩn, nếu không nó sẽ hiển thị. Hàm  open() mở một cửa sổ bật lên trên một phần tử con; nhấp vào sự kiện và hàm  close ()  ẩn cửa sổ bật lên trên nút được hiển thị trong ModalWrapper.

2.1  Tạo ảnh chụp nhanh:

it('render ModalTrigger component correctly', () => {  
    const ModalTriggerComponent = shallow(<ModalTrigger><div /></ModalTrigger>);
    expect(ModalTriggerComponent).toMatchSnapshot();
});

Chúng ta có nên thử nghiệm  ModalTrigger với kết xuất prop thành phần? Không; bởi vì  component sẽ được hiển thị bên trong  ModalWrapper thành phần, nó không phụ thuộc vào thành phần được thử nghiệm. Nó đã được bao phủ với các bài kiểm tra trong các  ModalWrapper bài kiểm tra.

2.2  Đạo cụ kiểm tra. Chúng tôi có một chỗ dựa  children và chúng tôi muốn chắc chắn rằng chúng tôi chỉ có một đứa con.

it('ensure to have only one child (control element)', () => {  
    expect(ModalTriggerComponent.findWhere(node => node.key() === 'modal-control').length).toEqual(1);
});

2.3  Thử nghiệm các loại prop. Đạo cụ trẻ em nên là đồ vật, kiểm tra điều này trong bài kiểm tra tiếp theo:

const ModalTriggerComponent = mount(<ModalTrigger><div /></ModalTrigger>);

it('check children prop type', () => {  
      expect(ModalTriggerComponent.props().children).toBeObject();
});

2.4 Một phần quan trọng của  ModalTrigger thành phần là kiểm tra trạng thái. 

Chúng tôi có hai trạng thái: 

Popup được mở. Để biết rằng phương thức được mở, chúng ta cần kiểm tra trạng thái của nó. Đối với điều này, hãy gọi  open hàm từ thể hiện của thành phần và mong rằng  toggled trạng thái sẽ là đúng.

it('check the modal is opened', () => {  
    const event = {
        preventDefault: () => {},
        stopPropagation: () => {}
    };
    ModalTriggerComponent.instance().open(event);
    expect(ModalTriggerComponent.state().toggled).toBeTruthy();
});

Cửa sổ bật lên được đóng và kiểm tra -  toggled trong trạng thái nên là sai.

it('check the modal is closed', () => {  
   ModalTriggerComponent.instance().close();
   expect(ModalTriggerComponent.state().toggled).toBeFalsy();
});

Danh sách kiểm tra đầy đủ:  ModalTrigger.test.js

Bây giờ các phương thức được kiểm tra đầy đủ. Một lời khuyên để kiểm tra các thành phần phụ thuộc lẫn nhau: trước tiên hãy xem qua các thành phần và viết kế hoạch kiểm tra, xác định những gì bạn cần kiểm tra trong từng thành phần, kiểm tra các trường hợp kiểm tra cho từng thành phần và chắc chắn rằng bạn không lặp lại cùng một trường hợp thử nghiệm trong cả hai thành phần. Phân tích cẩn thận các biến thể có thể và tối ưu cho phạm vi kiểm tra.

5. Thử nghiệm HOC (Thành phần bậc cao)

Hai phần cuối (kiểm tra trường của HOC và mẫu) được kết nối với nhau. Tôi muốn chia sẻ với bạn cách kiểm tra bố cục trường với HOC của nó. 

Giải thích về  BaseFieldLayoutlý do tại sao chúng ta cần thành phần này và nơi chúng ta sử dụng nó:

  • BaseFieldLayout.js là wrapper cho các thành phần hình thức đầu vào như TextInput, CheckboxInput, DateInput, SelectInput vv Tên của họ kết thúc bằng  -Input vì chúng tôi sử dụng gói Redux-form và các thành phần này là những thành phần đầu vào Redux dạng logic.
  • Chúng tôi cần BaseFieldLayout để tạo bố cục cho các thành phần trường biểu mẫu, đó là kết xuất nhãn, chú giải công cụ, tiền tố (tiền tệ, viết tắt mét vuông, v.v.), biểu tượng, lỗi, v.v.
  • Chúng tôi sử dụng nó trong BaseFieldHOC.js để gói inputComponent trong bố cục trường và kết nối nó với dạng redux với sự trợ giúp của  <Field/> thành phần.

Danh sách mã cho thành phần được thử nghiệm:  BaseFieldHOC.js

HOC nhận các thành phần đầu vào của biểu mẫu và trả về các thành phần, được kết nối với biểu mẫu redux.

Phân tích HOC:

  • Thành phần này chỉ nhận được một prop ,  component. Trước hết, tôi cần tạo thành phần này và bọc nó trong BaseFieldHOC.
  • Tiếp theo, tôi cần trang trí bọc HOC với dạng redux để có được trường kết nối với dạng redux.
  • Kết xuất trường này bên trong <Provider> thành phần React Redux  để làm cho cửa hàng có sẵn cho thành phần được thử nghiệm. Để giả cửa hàng, chỉ cần làm:
const store = createStore(() => ({}));  

Bây giờ, trước mỗi bài kiểm tra, tôi cần làm tiếp theo:

let BaseFieldHOCComponent;

beforeEach(() => {  
    const TextInput = () => { return 'text input'; },
        BaseFieldHOCWrapper = BaseFieldHOC(TextInput),
        TextField = reduxForm({ form: 'testForm' })(BaseFieldHOCWrapper);
    BaseFieldHOCComponent = renderer.create(
        <Provider store={store}>
            <TextField name="text-input" />
        </Provider>
    ).toJSON();
});

Sau đó, thành phần đã sẵn sàng để thử nghiệm:

1. Tạo ảnh chụp nhanh:

it('render correctly component', () => {  
    expect(BaseFieldHOCComponent).toMatchSnapshot();
});

2. Đảm bảo rằng thành phần đầu vào được bọc  BaseFieldLayout sau khi kết xuất:

it('check input component is wrapped in BaseFieldLayout', () => {  
    expect(BaseFieldHOCComponent.props.className).toEqual('form-group');
});

Đó là tất cả, HOC được bảo hiểm. Phần phức tạp nhất trong việc thử nghiệm các thành phần dạng redux được kết nối là chuẩn bị cho trường (trang trí với biểu mẫu redux và cửa hàng thiết lập); phần còn lại là dễ dàng, chỉ cần làm theo hướng dẫn và không có gì khác. 

Danh sách kiểm tra đầy đủ:  BaseFieldHOC.test.js

6. Kiểm tra biểu mẫu / lĩnh vực

Trường HOC đã được kiểm tra và chúng tôi có thể chuyển sang  BaseFieldLayout thành phần.

Danh sách mã cho thành phần được thử nghiệm:  BaseFieldLayout.js

Hãy mã BaseFieldLayout.js; viết bài kiểm tra theo hướng dẫn trên.

1. Trước hết, tạo một ảnh chụp nhanh.

Thành phần này sẽ không được hiển thị nếu không có defaultProps:

  • đầu vào
  • Các đạo cụ được cung cấp bởi redux-form: các đối tượng đầu vào và meta. Nhập với tên thuộc tính và meta với lỗi thuộc tính và chạm:
const defaultProps = {  
   meta: {
        touched: null,
        error: null
    },
    input: {
        name: 'field-name'
    },
    inputComponent: () => { return 'test case'; }
}

Để sử dụng defaultProps trong mỗi trình bao bọc được kiểm tra, hãy làm như sau:

import TestBaseFieldLayout from '../BaseFieldLayout';

const BaseFieldLayout = (props) => <TestBaseFieldLayout {...defaultProps} {...props} />;  

Bây giờ chúng tôi đã sẵn sàng để tạo một ảnh chụp nhanh:

it('render correctly BaseFieldLayout component', () => {  
    const BaseFieldLayoutComponent = renderer.create(<BaseFieldLayout />).toJSON();
    expect(BaseFieldLayoutComponent).toMatchSnapshot();
});

2. Đạo cụ kiểm tra:

Thành phần này có nhiều đạo cụ. Tôi sẽ đưa ra ví dụ về một vài cái; phần còn lại được kiểm tra bằng cách tương tự.

  • Đảm bảo  icon prop được hiển thị chính xác:
it('render correctly icon prop', () => {  
    const props = {
            icon: <span className="icon-exclamation" />
        },
        BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />);
        expect(BaseFieldLayoutComponent.find('span').hasClass('icon-exclamation')).toBeTruthy();
});
  • Đảm bảo nội dung chú giải công cụ hiển thị bên cạnh nhãn
const props = {  
        labelTooltipContent: 'tooltip for label'
    },
    BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />);

it('check prop is rendered', () => {  
   expect(BaseFieldLayoutComponent.find('span').hasClass('tooltip-icon')).toBeTruthy();
});
  • Kiểm tra  fieldLink chống đỡ
    • Đảm bảo  fieldLink là null theo mặc định
it('check prop is null by default', () => {  
    const BaseFieldLayoutComponent = shallow(<BaseFieldLayout />);
    expect(BaseFieldLayoutComponent.props().fieldLink).toBe(null);
});
  • Đảm bảo trườngLink kết xuất chính xác với giá trị tùy chỉnh

3. Lỗi kiểm tra:

it('check if field has error', () => {  
    const props = {
            meta: {
                touched: true,
                error: 'This field is required'
            }
        },
        BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />);
    expect(BaseFieldLayoutComponent.find('.error')).toHaveLength(1);
});

Danh sách kiểm tra đầy đủ:  BaseFieldLayout.test.js

Dòng dưới cùng

Bây giờ bạn có hướng dẫn đầy đủ về cách thực hiện kiểm tra phạm vi bảo hiểm đầy đủ của các thành phần dựa trên cấu trúc dự án. Từ kinh nghiệm của bản thân, tôi đã cố gắng giải thích những gì cần thiết để kiểm tra, theo thứ tự nào và những gì bạn có thể bỏ qua trong phạm vi kiểm tra. Ngoài ra, tôi đã chứng minh các ví dụ về một số thành phần thử nghiệm và phát hiện ra chuỗi bảo hiểm của cơ sở mã hóa. Tôi hy vọng rằng bạn sẽ thấy bài viết này hữu ích và sẽ chia sẻ phản hồi của bạn. Cảm ơn bạn đã đọc.

Bài viết về thử nghiệm các thành phần phản ứng ban đầu được xuất bản trên blog Django Stars.

|