CODEWITHSUNDEEP
javascriptreactjsunit-testingenzymejestjs
John Taylor
John Taylor

Reputation: 779

Testing simple React component using Jest and enzyme - what did I wrong?

I'm 'unit testing' greenhorn. What did I wrong here? How can I test such simple components?

test.js

import React from 'react';
import { shallow } from 'enzyme';
import StartButton from './';

describe('StartButton', () => {
  const wrapper = shallow(<StartButton />);

  it('renders correctly', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('renders correctly', () => {
    expect(wrapper.find('.StartButton-container')).to.have.length(1);
  });
});

startButton

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

import './style.css';

const StartButton = () => (
  <div className="StartButton-container">
    <RaisedButton
      label="Start Here"
      className="StartButton-main-button"
      //onClick={this.addBeer}
    />
  </div>
);

export default StartButton;

error

FAIL src\components\StartButton\test.js ● StartButton › renders correctly

TypeError: Cannot read property 'have' of undefined

  at Object.it (src/components/StartButton/test.js:13:54)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

PASS src\components\App\test.js

Test Suites: 1 failed, 1 passed, 2 total Tests: 1 failed, 2 passed, 3 total Snapshots: 2 passed, 2 total Time: 0.181s, estimated 1s Ran all test suites related to changed files.

Watch Usage: Press w to show more.

Upvotes: 0

Views: 114

Answers (2)

Arnold Gandarillas
Arnold Gandarillas

Reputation: 4332

To make that kind of assertions you need to use chai

$ npm install chai

test.js

import React from 'react';
import { expect } from 'chai';
import StartButton from './StartButton'

describe('<Foo />', () => {
  it('renders correctly', () => {
    expect(wrapper.find('.StartButton-container')).to.have.length(1);
  });

});

Upvotes: 1

theleebriggs
theleebriggs

Reputation: 581

I don't think Jest has that matcher syntax built in. You would have to do this:

expect(wrapper.find('.StartButton-container').length).toBe(1);

By putting the value you want to check inside the expect().

Upvotes: 0

Related Questions