Testcafe 不会识别 React

Question

我正在尝试运行我的第一个测试咖啡馆测试，但事实证明这很艰巨。

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)

查找测试.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');
});

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

干杯。

Answer 1

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

导入的文件client/routes/Lookup/components/Lookup.js是一个JSX文件，由于它是在TestCafe代码中导入的，因此在开始测试执行之前，il将首先被转译为javascript。

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

因此，您无法导入无法通过 TestCafe 转读为纯 JS 的文件。

Answer 2

尝试将其注释掉

//import Lookup from '../Lookup'

Answer 3

TestCafe 无法在类组件之外处理 JSX。 如果你正在使用 react，并创建一个返回 JSX 的函数，testCafe 会抛出它。 您可以通过创建一个新的类组件来解决它。 请参阅 TestCafé + React JSX 错误(意外令牌(以获取更多详细信息。