AEM Screens - clientlibs not getting referred on device in a custom component in a sequence channel

Css and js render on a device when written inside the markup, but not render when on device when they are referred as clientlibs. The custom component contains a simple div and simple css and jQuery function . When the same css and js is used within the html markup as <style> and <script> tag, the css and js work on a device , but when being referred as clientlibs, they do not render on device. The css and js work fine on both edit and preview mode of channel 

This is the way I am referring the clientlibs -

    <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.all @ categories='screen.test'}" data-sly-unwrap/>

    <div class ="testclass">This is test text.</div>

The channel renders with a simple text without any css and js applied. This is how it work when css and js is included in markup -

<div class ="testclass">This is a test text</div>

$(document).ready(function(){

$(".testclass").animate({left: '371px'});

    });
    
<style>
.testclass{
background:#98bf21;
height:100px;
width:100px;
position:absolute;
    }
</style>

I even checked the we.retail screen demo provided, it is also referring the css and js in the same sightly way of referring clientlibs, the css and js does render fine on their application channel, and they have not used any custom component in the sequence channel. 

Is there any extra configuration required to make the clientlibs referable on a deivce in AEM screens ? Please let me know , I am blocked because of this..