Альтернатива утилиты имя класса Test в React приложение

Question

я обращенную некоторые трудности написания тестовых случаев в моей React приложения после того, как я переместил свои внешние CSS файлы и переработан в объекты JS для того, чтобы поддержать react-inline

Ранее для моего теста случаев я использовал className, чтобы проверить, есть ли ожидаемый class в моем компоненте или нет. Поскольку я больше не использую классы, у меня возникают проблемы с реорганизацией моих тестов. Например, я проверяю, существуют ли классы avtar и img-rounded, если я передаюстиль в моем компоненте аватара.

it("should render image with rounded style if style is 'rounded'", done => { 
     let user = { displayName: "Foo", avatar: { url: "http://some.url"} }; 
     renderer.render(
      <UserAvatar user={user} style="rounded" /> 
     ); 
     let result = renderer.getRenderOutput(); 
     expect(result.type).toEqual("img"); 
     expect(result.props.className).toEqual("avatar img-rounded"); 
     expect(result.props.src).toEqual("http://some.url"); 
     done(); 
    }); 

Теперь я добавляю связанные стили непосредственно в компонент среагировать на основе style опоры прошли.

_getAvatarStyles() { 
     let avatarStyle = { 
      borderRadius: "50%" 
     }; 

     if (this.props.style === "circle" || this.props.style === "text-only" || this.props.style === "initials") { 
      avatarStyle = { 
       borderRadius: "50%" 
      }; 
     } else if (this.props.style === "rounded") { 
      avatarStyle = { 
       borderRadius: "10%" 
      }; 
     } 

     return avatarStyle; 
    }, 

Перед рефакторинга я добавлял className непосредственно в компонент, который выглядел как следующим образом:

_getAvatarClasses() { 
     return classNames({ 
      "avatar": true, 
      "img-rounded": this.props.style === "rounded", 
      "img-circle": this.props.style === "circle" 
     }); 
    }, 

Есть ли способ, что я могу непосредственно проверить style свойство в img тега. Например, возвращение true для циркулярного аватара, если компонент имеет borderRadius: "50%" или вернуть true для закругленного аватара, если он имеет borderRadius: "10%"

Answer 1

Рассматривали вы используете библиотеку тестирования как Sinon.js и шпионить функции, чтобы проверить возвращаемое значение? Было бы по существу сделать то же самое, и это будет выглядеть примерно так:

it("should render image with rounded style if style is 'rounded'", done => { 
     let user = { displayName: "Foo", avatar: { url: "http://some.url"} }; 
     renderer.render(
      <UserAvatar user={user} style="rounded" /> 
     ); 
     let result = renderer.getRenderOutput(); 
     let spy = sinon.spy(result, "_getAvatarStyles"); 
     result.forceUpdate(); //If '_getAvatarStyles()' is called on render, this allows it to be called again 
     let expected = { 
      borderRadius: "10%" 
     }; 
     expect(spy.returned(expected)).toBe(true); 
     done(); 
});