Как проверить, правильно ли отображается компонент в компоненте, используя Jest и Enzyme в React - PullRequest
Новая
       17

Как проверить, правильно ли отображается компонент в компоненте, используя Jest и Enzyme в React

0 голосов
/ 14 мая 2018

У меня есть компонент React с именем Product , который выглядит следующим образом: 

<div>
            <Wrapper>
                <Heading>{props.headerText}</Heading>
                <Service>({props.items.length})</Service>
            </Wrapper>
            {props.items !== undefined && props.items.length > 0 ? (
                <TableWrapper>
                    {props.items &&
                        props.items.length > 0 && (
                            <DataTable paginationSize={props.paginationSize}>
                                <DataTable.Heading accessor="name"> Name </DataTable.Heading>
                                <DataTable.Heading accessor="id"> Service ID </DataTable.Heading>
                                <DataTable.Heading accessor="type"> Access </DataTable.Heading>
                                <DataTable.Heading accessor="band"> Band </DataTable.Heading>
                                <DataTable.Heading accessor="noUsers"> Users </DataTable.Heading>

                                {props.tableItems.map((p, i) => {
                                    return <DataTable.Row key={i} data={p} />;
                                })}
                            </DataTable>
                        )}
                </TableWrapper>
            ) : (
                <NoMessage>{props.noItemMessage}</NoMessage>
            )}
        </div>

, где Оболочка , Заголовок , Сервис , TableWrapper являются стилевыми компонентами.Я пытаюсь протестировать этот компонент, используя Jest и Enzyme, чтобы проверить, правильно ли отображается headerText prop . Ниже приведен код, как я пытаюсь написать свой тестовый пример: 

 test("header text is being passed through correctly", () => {
        const wrapper = mount(
            <Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" />
        );
        expect(wrapper.find(HeaderText).text()).toEqual("Service");

но я получаю эту ошибку как: 

TypeError: Cannot read property 'blue' of undefined

      at Object.<anonymous>.exports.RightArrow.Icons.RightArrow.extend.props (src/lib/DataTable.js:149:129)

и строка 149 в DataTable.js: 

color: ${props => props.theme.secondary.blue};

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

Ответы [ 2 ]

0 голосов
/ 25 мая 2019

мы можем использовать themeProvider из styled-componentnets для создания оболочки вокруг shallow или mount методов фермента, как показано ниже: 

import { ThemeProvider } from 'styled-components';

const mountWithTheme = (children, theme={}, options = {}) => {
 const wrapper = mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options);
 return wrapper.mount({});
};

test("header text is being passed through correctly", () => {
  const wrapper =  mountWithTheme(<Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" />,
{ secondary: { blue: 'blue' } }); 
// we passed the theme we want as an argument to the mountWithTheme method
  expect(wrapper.find(HeaderText).text()).toEqual("Service");
});

Будет лучше вытащить утилитыmountWithTheme и ShallowWithTheme в другой файл, чтобы его можно было повторно использовать, а также в качестве предложения вы можете создать файл mockTheme, содержащий некоторые темы по умолчанию, которые можно передавать в эти оболочки, вместо ручной передачи темы каждый раз, когда мы потребляем этиutils.

Для получения дополнительной информации посетите ссылку ниже: https://github.com/styled-components/styled-components/issues/1319

0 голосов
/ 14 мая 2018

, чтобы получить возможность добавить тему в качестве реквизита в вашей обертке

<Product items={data} theme={{secondary: {blue: ''}}} headerText="Service" paginationSize="5" noItemMessage="No results found" />

или издеваться

import { createSpy } from 'expect'; const theme = createSpy(); <Product items={data} theme={theme} headerText="Service" paginationSize="5" noItemMessage="No results found" />

...