Testcafe wont recognise React

问题

I'm trying to run my first testcafe test but it's proving arduous.

testcafe -e chrome client/routes/Lookup/components/testcafe/lookup-test.js

SyntaxError: client/routes/Lookup/components/Lookup.js: Unexpected token (60:8)
  58 |     if (error.status && error.status !== 404) {
  59 |       return (
> 60 |         <NetworkIssues code={error.status} />
     |         ^
  61 |       );
  62 |     }
  63 |
at Object.<anonymous> (client/routes/Lookup/components/testcafe/lookup-test.js:1:1)

lookup-test.js

import Lookup from '../Lookup';
import React from 'react';
import { waitForReact } from 'testcafe-react-selectors';


fixture('Lookup Component').page('http://localhost:3000/web/lookup').beforeEach(async () => {
  await waitForReact();
});

test('foo', async (x) => {
  await x
    .typeText('customerName', '07450118811')
    .expect('customerName.value').contains('07450118811');
});

My code doesn't have any errors. It compiles and works fine and passes all my jest and enzyme unit testing. But I can't find any guidance online for this. As you can see the ignore errors flag is used to no avail.

Cheers.

回答1:

When you start TestCafe, all your test code is transpiled as a first step before execution. What is executed is the result of this transpilation process and not your original source code, even if your code is pure JavaScript.

The imported file client/routes/Lookup/components/Lookup.js is a JSX file, and since it is imported in the TestCafe code, il will be first transpiled to javascript before starting test execution.

The TestCafe transpilation process (at the time of writing - it may change in the future) is not configured to handle JSX files.

Therefore, you cannot import files that cannot be transpiled into pure JS by TestCafe.

回答2:

try commenting this out

//import Lookup from '../Lookup'

回答3:

TestCafe can't handle JSX outside of class components. If you are using react, and create a function that returns JSX, testCafe will throw up on it. You can resolve it by just creating a new class component instead. see TestCafé + React JSX error (unexpected Token) for more details.

来源：https://stackoverflow.com/questions/51859863/testcafe-wont-recognise-react

标签

javascript

reactjs

automated-tests

e2e-testing

testcafe