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

Question

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.

Arnold Gandarillas · Accepted Answer · 2018-03-14 01:35:17Z

1

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);
  });

});

answered Mar 14, 2018 at 1:35

Arnold Gandarillas

4,3901 gold badge35 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

theleebriggs · Accepted Answer · 2018-03-14 01:22:17Z

0

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().

answered Mar 14, 2018 at 1:22

theleebriggs

5813 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related