Testcafe 无法识别 React答案

【问题标题】：Testcafe wont recognise ReactTestcafe 无法识别 React
【发布时间】：2019-01-22 09:35:09
【问题描述】：

我正在尝试运行我的第一个 testcafe 测试，但它被证明是艰巨的。

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');
});

我的代码没有任何错误。它编译和工作正常，并通过了我所有的笑话和酶单元测试。但是我在网上找不到任何指导。如您所见，忽略错误标志无济于事。

干杯。

【问题讨论】：

你可以尝试使用这个选项作为一个hacky解决方法 - devexpress.github.io/testcafe/documentation/using-testcafe/… 作为另一个想法（从未使用过testcafe tbh），你可以尝试ReactSelector('<target component>'); 然后使用这个选择器作为第一个typeText 中的参数。如果您搜索typeText，则在github.com/DevExpress/testcafe-react-selectors 进行类似的操作
请给我一个链接到您的网页或创建一个类似的在线示例，以便我可以在本地检查问题。

标签： javascript reactjs automated-tests e2e-testing testcafe

【解决方案1】：

当您启动 TestCafe 时，您的所有测试代码都会在执行前作为第一步进行转换。执行的是这个转译过程的结果，而不是您的原始源代码，即使您的代码是纯 JavaScript。

导入的文件client/routes/Lookup/components/Lookup.js是一个JSX文件，由于是在TestCafe代码中导入的，所以在开始测试执行前会先将il转译成javascript。

TestCafe 转译过程（在撰写本文时 - 将来可能会更改）未配置为处理 JSX 文件。

因此，不能导入TestCafe无法转译成纯JS的文件。

【讨论】：

【解决方案2】：

试着评论一下

//import Lookup from '../Lookup'

【讨论】：

【解决方案3】：

TestCafe 无法处理类组件之外的 JSX。如果你正在使用 react，并创建一个返回 JSX 的函数，testCafe 会抛出它。您可以通过创建一个新的类组件来解决它。有关详细信息，请参阅TestCafé + React JSX error (unexpected Token)。

【讨论】：