Question

我正在尝试为react组件编写单元测试，其中我在我的react组件内部使用一个Web组件。该组件的实现：

import React, { Component } from "react";
import '@vaadin/vaadin-date-picker';

class AppForm extends Component {

   constructor(props) {
      super(props);
      this.state = { dob: '' };
      this.dobRef = React.createRef();
   }

   componentDidMount() {
      this.refs.dobRef.addEventListener('change', e=> {
        console.log('componentDidMount', e.target.value);
      })
   }

render() {
    // const { classes } = this.props;
    return (
        <form onSubmit={this.handleSubmit}>
            <div>
                <div>
                    <div >
                    <vaadin-date-picker label="When were you born?" ref="dobRef"></vaadin-date-picker>
                    </div>
                </div>
                <div>
                    <input type="submit" value="Submit" />
                </div>
            </div>

        </form>
    )
  }
}

export default AppForm;

vaadin-date-picker是我在这里使用的一个Web组件。

单元测试实现：

 import React from 'react';
 import ReactDOM from 'react-dom';
 import AppForm from './AppForm';
 import ShallowRenderer from 'react-test-renderer/shallow';

 it('renders without crashing', () => {
   const div = document.createElement('div');
   const renderer = new ShallowRenderer();
   renderer.render(<AppForm />);
   const result = renderer.getRenderOutput();
   expect(result.type).toBe('div');
 });

我收到此错误：

  SyntaxError: Unexpected string

  1 | import React, { Component } from "react";
> 2 | import '@vaadin/vaadin-date-picker';
    | ^
  3 |
  4 | class AppForm extends Component {
  5 |

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/AppForm.js:2:1)

我猜应该有某种方法可以模拟这个，但不确定是什么。有人可以帮忙吗？

使用Web组件的单元测试反应

0 个答案: