草庐IT

javascript - 错误 : Enzyme Internal Error: unknown composite type undefined

coder 2024-07-19 原文

我在尝试应用 enzyme 时遇到此错误,但我找不到任何相关问题。

这是test.js;

import React from 'react';
import AccountLoginForm from './LoginPage';
import sinon from 'sinon';
import { mount, shallow, configure } from 'enzyme';
import { expect } from 'chai';
import Adapter from 'enzyme-adapter-react-15';
import configureStore from 'redux-mock-store';

configure({ adapter: new Adapter() });

const mockStore = configureStore();

sinon.spy(AccountLoginForm.prototype, 'componentDidMount');

describe('<AccountLoginForm />', () => {
  it('calls componentDidMount', () => {
    const wrapper = shallow(<AccountLoginForm />,  { context: { store: mockStore() } });
    expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true);
  });
});

这是登录页面;

import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox, Row, Col, Alert, Card } from 'antd';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as api from '../../apiCalls/axiosCalls';
import * as authenticationActions from '../../actions/authenticationActions';
import './LoginPage.css';

const FormItem = Form.Item;

class AccountLoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      errorValidation: true
    }
  }

  componentDidMount(){
    console.log("DENEME")
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const userData = {
          username: values.userName,
          password: values.password
        };
        api.postLogin(userData)
        .then((response) => {
          this.props.actions.userLoginCompleted(response);
          this.props.router.push('/');
          this.setState({ errorValidation: true });
        })
        .catch((err) => {
          // TODO update field warnings based on login failure
          this.setState({ errorValidation: false });
        });
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (


      <Row align="center">

        <Col >

          <Card style={{ width: 800, margin: "auto", marginTop:"200px"}}>
            <Row align="middle" className="page-title-bar" gutter={36}>

              <Col span={14} className="login-box">
                <img alt="example" src="../../assets/images/loginIot.png" />
                <h2>Netas IOT Platform </h2>
                {/* <p>
                  Nulla sit amet est. Aenean viverra rhoncus pede. Fusce vel dui. Nunc nec neque.

Sed hendrerit. Suspendisse eu ligula.
                                </p> */}
              </Col>
              <Col span={10}  >
                <div className="loginlogo" >

                  <img src="../../assets/images/NetION.png" />


                </div>
                <Form onSubmit={this.handleSubmit} className="login-form">
                  <FormItem>
                    {getFieldDecorator('userName', {
                      rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                      <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                      )}
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator('password', {
                      rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                      <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                      )}
                  </FormItem>
                  <FormItem>
                    {/* {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(
                <Checkbox>Remember me</Checkbox>
                                )}
              <a className="login-form-forgot" href="">Forgot password</a> */}
                    {!this.state.errorValidation &&
                      <Alert
                        message='Error'
                        description="Login is failed."
                        type="error"
                        className="login-form-error"
                        showIcon />
                    }
                    <br />
                    <Button type="primary" htmlType="submit" className="login-form-button">
                      Log in
                    </Button>
                  </FormItem>
                </Form>
              </Col>
            </Row>
          </Card>

        </Col>
      </Row>

    );
  }
}

const LoginPage = Form.create()(AccountLoginForm);


function mapStateToProps(state, ownProps){
  return {
      authentication: state.authentication
  };
}

function mapDispatchtoProps(dispatch) {
  return {
    actions: bindActionCreators(authenticationActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchtoProps)(LoginPage);

当我运行时;

mocha --require ignore-styles --compilers js:babel-core/register frontend/src/antd/Login/test

我收到这个错误;

< AccountLoginForm /> 1) calls componentDidMount

0 passing (46ms) 1 failing

1) < AccountLoginForm /> calls componentDidMount: Error: Enzyme Internal Error: unknown composite type undefined at compositeTypeToNodeType (node_modules\enzyme-adapter-react-15\build\ReactFifteenAdapter.js:61:13) at Object.getNode (node_modules\enzyme-adapter-react-15\build\ReactFifteenAdapter.js:254:27) at new ShallowWrapper (node_modules\enzyme\build\ShallowWrapper.js:120:37) at shallow (node_modules\enzyme\build\shallow.js:19:10) at Context. (D:/Users/buraku/Desktop/ReactProjects/feature_buraku_v3/iot_core_client/frontend/src/antd/Login/LoginPageTest.js:17:21)

npm ERR! Test failed. See above for more details.

最佳答案

我有同样的问题,我的解决方案很简单,检查包 react-test-renderer 和 react 在 package.json 文件中是否具有相同的基础版本

例如,

这将因使用 shallow 的 enzyme 复合错误而失败:

"react-test-renderer": "16.4"
"react": "15.6"

这个可以使用 shallow:

"react-test-renderer": "15.5.4"
"react": "15.6.2"

希望对你有帮助

您好!

关于javascript - 错误 : Enzyme Internal Error: unknown composite type undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46564969/

有关javascript - 错误 : Enzyme Internal Error: unknown composite type undefined的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”,并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符,电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时,所有测试都通过了,但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  3. ruby-on-rails - 如何在 Rails View 上显示错误消息? - 2

    我是rails的新手,想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围,如果不在范围内则返回错误信息。我可以检查上面代码的范围,但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单,一种显示ActiveRecord模型实例属性的表单。c

  4. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常,除了该文件不是公开可用的,而且我无法获得它的公共(public)URL。但是当我登录到S3时,我可以正常查看我的文件。为了使其公开可用,我将最后一行更改为obj.upload_file(file

  5. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库,我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  6. ruby - #之间? Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中,第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  7. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  8. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型,即Invoice和Invoice_details。一个Invoice_details属于Invoice,一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  9. arrays - 这是 Ruby 中 Array.fill 方法的错误吗? - 2

    这个问题在这里已经有了答案:Arraysmisbehaving(1个回答)关闭6年前。是否应该这样,即我误解了,还是错误?a=Array.new(3,Array.new(3))a[1].fill('g')=>[["g","g","g"],["g","g","g"],["g","g","g"]]它不应该导致:=>[[nil,nil,nil],["g","g","g"],[nil,nil,nil]]

  10. ruby-on-rails - Ruby on Rails 计数器缓存错误 - 2

    尝试在我的RoR应用程序中实现计数器缓存列时出现错误Unknownkey(s):counter_cache。我在这个问题中实现了模型关联:Modelassociationquestion这是我的迁移:classAddVideoVotesCountToVideos0Video.reset_column_informationVideo.find(:all).eachdo|p|p.update_attributes:videos_votes_count,p.video_votes.lengthendenddefself.downremove_column:videos,:video_vot

随机推荐