React 测试渲染器 JSON 没有子项的打字稿错误

Question

我已经使用文档中的基本打字稿模板创建了一个博览会应用程序。安装了测试及其类型所需的所有要求。

我可以运行测试，并且确实通过了测试。

但是，对于文档上的示例测试，我在 IDE（VS 代码）上收到错误：

Answer 1

您可以使用类型断言来指定特定类型。

\n

如果App组件有一个子组件列表：

\n

import React, { Component } from \'react\';\n\nexport default class App extends Component {\n  render() {\n    return (\n      <>\n        <div>app</div>\n        <p>123</p>\n      </>\n    );\n  }\n}\n

\n

您可以指定ReactTestRendererJSON[]fortree并编写测试，如下所示：

\n

import React from \'react\';\nimport renderer, { ReactTestRendererJSON } from \'react-test-renderer\';\nimport App from \'./index\';\n\ndescribe(\'67900373\', () => {\n  it(\'should pass\', () => {\n    const tree = renderer.create(<App />).toJSON() as ReactTestRendererJSON[];\n    console.log(tree);\n    tree.forEach((node) => {\n      expect(node.children?.length).toBe(1);\n    });\n  });\n});\n

\n

测试结果：

\n

 PASS  examples/67900373/index.test.tsx (9.11 s)\n  67900373\n    \xe2\x9c\x93 should pass (28 ms)\n\n  console.log\n    [\n      { type: \'div\', props: {}, children: [ \'app\' ] },\n      { type: \'p\', props: {}, children: [ \'123\' ] }\n    ]\n\n      at Object.<anonymous> (examples/67900373/index.test.tsx:8:13)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        10.006 s\n

\n

如果该App组件只有一个子组件

\n

 PASS  examples/67900373/index.test.tsx (9.11 s)\n  67900373\n    \xe2\x9c\x93 should pass (28 ms)\n\n  console.log\n    [\n      { type: \'div\', props: {}, children: [ \'app\' ] },\n      { type: \'p\', props: {}, children: [ \'123\' ] }\n    ]\n\n      at Object.<anonymous> (examples/67900373/index.test.tsx:8:13)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        10.006 s\n

\n

您可以指定ReactTestRendererJSONfortree并编写测试，如下所示：

\n

import React, { Component } from \'react\';\n\nexport default class App extends Component {\n  render() {\n    return <div>app</div>;\n  }\n}\n

\n

测试结果：

\n

 PASS  examples/67900373/index.test.tsx (8.113 s)\n  67900373\n    \xe2\x9c\x93 should pass (27 ms)\n\n  console.log\n    { type: \'div\', props: {}, children: [ \'app\' ] }\n\n      at Object.<anonymous> (examples/67900373/index.test.tsx:22:13)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        8.817 s, estimated 10 s\n

\n