Как выполнить модульное тестирование встроенного стиля компонента в reactjs? - PullRequest
Новая
       3

Как выполнить модульное тестирование встроенного стиля компонента в reactjs?

0 голосов
/ 13 февраля 2020

У меня есть функция с именем BsButtons, внутри которой у меня есть кнопка, которая имеет встроенный стиль. Я пытаюсь написать модульный тест, чтобы проверить, имеет ли конкретная кнопка определенный стиль или нет.

BsButtons.jsx 

import React from 'react';
import { Button } from 'semantic-ui-react';
export const BsButtons = (props) => {
     const { buttonstyle } = props || {}; 
    return(
        <div>
            <Button style={{...buttonstyle,backgroundColor:'#7B4259', boxShadow:'0 3px 0px rgba(123, 66, 89, 0.15)',borderRadius:20, fontWeight:200}} {...props} />
        </div>
    );};

BsButton.test. js

import React from 'react' ;
import { renderer, create } from 'react-test-renderer' ;
import Enzyme, { shallow, mount } from "enzyme";
import BsButtons from '../../src/components/ButtonComponents/BsButtons';
import Adapter from "enzyme-adapter-react-16";
import { Button } from 'semantic-ui-react';

Enzyme.configure({ adapter: new Adapter() });

const tree = create(<BsButtons/>).toJSON();
it('Should have Background color as #7B4259', () => {
        expect(tree.find(Button)).to.have.style('backgroundColor','#7B4259')
    });

Я получаю ошибка, что tree.find is not a function.

1 Ответ

0 голосов
/ 13 февраля 2020

.find работает на текущей оболочке. Вы пытаетесь использовать .find() на экземпляре тестового рендерера, поэтому вы получаете ошибку как tree.find is not a function. Сначала получите экземпляр оболочки вашего компонента, а затем попытайтесь найти свойство стиля.

Попробуйте сделать так: 

import { shallow } from 'enzyme';

let wrapper = shallow(<BsButtons/>);
it('Should have Background color as #7B4259', () => {
  expect(wrapper.find(Button)).to.have.style('backgroundColor','#7B4259');
});
...