Testcafe doesn't recognize my DOM in react

Question

I'm new into testcafe, and trying to run a simple test on a client which made by create-react-app, but for some reason, I can't reach the DOM, and use the react selectors.

My client:

import Button from '@material-ui/core/Button'

function(App){
    return(
        <Button>my button</Button>
    );
}

export default App;

This is my test:

fixture `Record Page`
.page('http://localhost:3000')

test('try', async t=>{
    await t
        .click(ReactSelector('Button')) //from Material UI
        .wait(100000)
})

Error:

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

which related to the 'Button'

Thank you

Answer 1

This is a known problem with testcafe-react-selectors module and material UI components. For additional details, see the corresponding issue in testcafe-react-selectors repository.