Компонент ошибки тестирования React с дочерними элементами

Я новичок в тестировании компонентов в React. Я пытаюсь протестировать компонент с помощью Jest и Enzyme.

Адрес JCpenney1.js:

import React from 'react';
import PropTypes from 'prop-types';
import './AddressJCpenney1.css';
import withStyles from 'react-jss';

const styles = {
    divStyle:{      
    textAlign: props =>props.textalign,
    width: props =>props.addressWidth,
 }
};
function AddressJCpenney1({ children, classes}) {       
    return (
        <div className = {classes.divStyle}>
            {children}
        </div>
    );
}
AddressJCpenney1.propTypes = {      
    children: PropTypes.node.isRequired,       
    classname: PropTypes.string.isRequired,     
    textalign:PropTypes.string,
    /** Width of the section will be defined here*/
    addressWidth:PropTypes.string

};
AddressJCpenney1.defaultProps = {   
    classname: 'address',
    textalign:'left',
    addressWidth:'100%'
};

export default withStyles(styles)(AddressJCpenney1)

Мой тестовый файл — AddressJcpenney1-test.js:

import React from 'react';
import {shallow, mount, render} from 'enzyme';

import AddressJCpenney1 from '../AddressJCpenney1/AddressJCpenney1';

// describe what we are testing
describe('Address Component', () =>{
    // make our assertion and what we expect to happen
    it('Address block is working fine',() =>{
        expect(shallow(<AddressJCpenney1/>).find('div.divStyle').exists()).toBe(true)
    })
})

При запуске этого тестового файла я получаю эту ошибку:

   src/components/__tests__/AddressJCpenney1-test.js
  ● Console

    console.error node_modules/prop-types/checkPropTypes.js:19
      Warning: Failed prop type: The prop `children` is marked as required in `AddressJCpenney1`, but its value is `undefined`.
          in AddressJCpenney1

  ● Address Component › Address block is working fine

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

       9 |     // make our assertion and what we expect to happen
      10 |     it('Address block is working fine',() =>{
    > 11 |         expect(shallow(<AddressJCpenney1/>).find('div.divStyle').exists()).toBe(true)
         |                                                                            ^
      12 |     })
      13 | })

      at Object.toBe (src/components/__tests__/AddressJCpenney1-test.js:11:76)

Может ли кто-нибудь предложить мне, где я ошибаюсь, а также как передать дочерний реквизит в этом случае.

ты не написал ошибку

Rishikesh Dhokare 15.02.2019 11:50

ой! моя ошибка, написал ошибку

developerExecutive 15.02.2019 11:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
1 032
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы объявили 4 протипа, и два из них обязательны, вы должны передать их при монтировании компонента, чтобы протестировать его.
Я также предпочитаю монтировать их вместо поверхностного монтирования, поэтому вы можете изменить тесты следующим образом (где mockedCLassName и mockedChildren соответственно изменены):

import React from 'react';
import {shallow, mount, render} from 'enzyme';

import AddressJCpenney1 from '../AddressJCpenney1/AddressJCpenney1';

// describe what we are testing
describe('Address Component', () =>{
    // make our assertion and what we expect to happen
    it('Address block is working fine',() =>{
        var mockedChildren = [];
        var wrapper = mount(
                      <AddressJCpenney1 
                          className = {'mockedClassName'}
                          children = {mockedChildren}
                      />);
        expect(wrapper).find('div.divStyle').exists()).toBe(true)
    })
})

Спасибо за ваш ответ, что мы передадим здесь: expect(wrapper).find('div.divStyle').exists()).toBe(true)

developerExecutive 15.02.2019 13:11

Я не понимаю вашего вопроса. Работает ли это утверждение, когда вы его запускаете? expect(wrapper).find('div.divStyle').exists()).toBe(true) Возможны два результата: истина или ложь. или он даже не запускается, он запускается? он все еще дает ту же ошибку?

Eliâ Melfior 15.02.2019 19:47

it('Адресный блок работает нормально',() =>{ var mockedChildren = []; var wrapper = mount( <AddressJCpenney1 className = {'mockedClassName'} children = {mockedChildren} />); expect(wrapper.find( АдресJCpenney1).length).toBe(1);})

developerExecutive 19.02.2019 07:11

Другие вопросы по теме