Can't test React components with Storybook

[mkubrycz]

Are you requesting a feature or reporting a bug?

bug

What is the current behavior?

In our project we use React Storybook and we can't run tests for it with testcafe. When trying to run tests against storybook's server we keep getting this error:

 Storybook
 ✖ Component

   1) Error on page "http://localhost:6006/":

      Uncaught TypeError: se[e.type] is not a function

      Browser: Chrome 55.0.2883 / Mac OS X 10.12.2



 1/1 failed (1s)

What is the expected behavior?

for tests to run and pass

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL: local storybook server

Test code

import { Selector } from 'testcafe';

fixture `Storybook`
    .page `http://localhost:6006/`;

test('Component', async t => {
    await t
        .click(Selector('#component'))
       // it doesn't matter what are test instructions
});

Specify your

• operating system: Mac OS X 10.12.2
• testcafe version: 0.11.1
• node.js version: 6.9.1

[churkin]

@mkubrycz I'm researching it now

[churkin]

Hi @mkubrycz,
I've deployed storybook demo app - https://github.com/kadira-samples/react-storybook-demo. And get a lot of js errors without testcafe:

Please, try to skip js errors.. Let me know if it helps.

[mkubrycz]

Hi @churkin,

so I've tried and skipping js errors results with error:

1) The specified selector does not match any element in the DOM tree.

my browser displays just blank page although url is correct.

[churkin]

@mkubrycz Unfortunately I need example for debugging. Could you share problem link?

[mkubrycz]

@churkin
For example you can try setting simple react app with create-react-app and then follow instructions on storybook page.
I get the same results here without any js errors

testcode:

import { Selector } from 'testcafe';

const helloButton = Selector("button").withText("Hello Button");

fixture `Storybook`
    .page `http://localhost:9001/`;

test('Storybook example', async t => {
    await t
        .switchToIframe("#storybook-preview-iframe")
        .click(helloButton);
});

I've created github repo with this problem, just:

$ npm install
$ npm run storybook

test is under test/test-example.js

[miherlosev]

I ran test-example.js from your repo and got an error:

It looks like you don't add a file with page model definitions.

Please, provide this file.

[mkubrycz]

@miherlosev
Sorry I was copying quickly from another example I was trying to run. It was supposed to be:

import { Selector } from 'testcafe';

const helloButton = Selector("button").withText("Hello Button");

fixture `Storybook`
    .page `http://localhost:9001/`;

test('Storybook example', async t => {
    await t
        .switchToIframe("#storybook-preview-iframe")
        .click(helloButton);
});

from the start.
I've fixed this in my repo. Still doesn't work, when I run normally I get Uncaught TypeError: se[e.type] is not a function and when I'm ignoring js errors The specified selector does not match any element in the DOM tree. and there's nothing displayed in the browser window besides Waiting for an element to appear.

[miherlosev]

Cannot reproduce.

Try to update to the latest testcafe version - 0.12.1 and reproduce the bug with this version.

[mkubrycz]

Thank you @miherlosev and @churkin !

new version indeed fixed my problem.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.