Question

在我们的应用程序中，我们使用jsoneditor库。我们的应用程序是用react编写的，我们以类似于react_demo的示例的方式实现了jsoneditor，可以在here

中找到它

我们需要使用react-testing-library来测试以下代码

// App.js

import React, { Component } from 'react';

import JSONEditorDemo from './JSONEditorDemo';
import './App.css';

class App extends Component {
  state = {
    json: {
      'array': [1, 2, 3],
      'boolean': true,
      'null': null,
      'number': 123,
      'object': {'a': 'b', 'c': 'd'},
      'string': 'Hello World'
    }
  };

  render() {
    return (
      <div className="app">
        <h1>JSONEditor React demo</h1>
        <div className="contents">
          <JSONEditorDemo
              json={this.state.json}
              onChangeJSON={this.onChangeJSON}
          />
          <div className="code">
            <pre>
              <code>
                {JSON.stringify(this.state.json, null, 2)}
              </code>
            </pre>
          </div>
        </div>
      </div>
    );
  }

  onChangeJSON = (json) => {
    this.setState({ json });
  };
}

export default App;

和

// JSONEditorDemo.js

import React, {Component} from 'react';

import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';

import './JSONEditorDemo.css';

export default class JSONEditorDemo extends Component {
  componentDidMount () {
    const options = {
      mode: 'tree',
      onChangeJSON: this.props.onChangeJSON
    };

    this.jsoneditor = new JSONEditor(this.container, options);
    this.jsoneditor.set(this.props.json);
  }

  componentWillUnmount () {
    if (this.jsoneditor) {
      this.jsoneditor.destroy();
    }
  }

  componentWillUpdate(nextProps, nextState) {
    this.jsoneditor.update(nextProps.json);
  }

  render() {
    return (
        <div className="jsoneditor-react-container" ref={elem => this.container = elem} />
    );
  }
}

我们希望在单元测试中介绍所有代码。我们需要在 JSONEditorDemo

的 App.js 和 onChangeJSON 选项方法中测试 onChangeJSON

您认为可以使用react-testing-library测试这种类型的组件吗？

如何在react应用中使用react-testing-library测试jsoneditor组件

0 个答案: