test con enzima reagisce un componente con il contesto: restituisce un oggetto vuoto

voti
2

Sto cercando di eseguire un test dummy con l'enzima più di un componente. il test sta per controllare il contesto. anche se sto scrivendo lo stesso codice come documentazione del enzima contesto è sempre vuota.

import React from 'react';
import { shallow } from 'enzyme';
import Overlay from '../../../../app/components/Overlay/Overlay';


describe('<Overlay />', () => {
  it.only('return a context', () => {
    const wrapper = shallow(<Overlay />, { context: { foo: 10 } });
    console.log(wrapper.context());
    // expect(wrapper.context().foo).to.equal(10);
  });
})

l'uscita del test è:

<Overlay />
{}
✓ return a context

dove sbaglio?

È pubblicato 06/10/2016 alle 10:23
fonte dall'utente
In altre lingue...                            


1 risposte

voti
3

Poiché la scheda del Overlaycomponente non è dato, assumo il contesto non viene utilizzato in esso (pls controllare childContextTypese getChildContextsono definiti correttamente)

Ad esempio, fare riferimento alla spiegazione di contesti a reagire documenti

Ho preso lo stesso esempio per abilitare il test,

import React from 'react';

export default  class Button extends React.Component {
  render() {
    return (
      <button style={{ background: this.context.color }}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {
  color: React.PropTypes.string,
};

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  getChildContext() {
    return { color: 'purple' };
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

MessageList.childContextTypes = {
  color: React.PropTypes.string,
};

Ho creato il banco di prova per Buttoncomponenti come sotto,

import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import Button from '../../src/components/SampleComp';

describe.only('<Button />', () => {
  it('assert for context', () => {
    const wrapper = shallow(
      <Button />,
      { context: { color: 'red' } }
    );
    expect(wrapper.context().color).to.equal('red');
    expect(wrapper.context('color')).to.equal('red');
  });
});
 <Button />
    ✓ assert for context


  1 passing (214ms)

In questo modo affermare in modo corretto.

Risposto il 06/10/2016 a 12:37
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more