Тестирование простого компонента React с использованием Jest и энзима - в чем я ошибся?

Question

Я новичок в модульном тестировании. Что я здесь не так? Как я могу протестировать такие простые компоненты?

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 ›отображается правильно
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)
ПРОЙДИТЕ src \ components \ App \ test.js

Наборы тестов: 1 не прошел, 1 прошел, всего 2 теста: 1 не прошел, 2 прошел, всего 3 снимка: 2 пройдено, всего 2 Время: 0,181 с, примерно 1 с Выполнены все наборы тестов, связанные с измененными файлами.

Использование часов: нажмите w, чтобы увидеть больше.

javascript reactjs unit-testing enzyme jestjs

0

John Taylor 14 Мар 2018 в 04:11

Answer 1

Чтобы делать такие утверждения, вам нужно использовать 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);
  });

});

1

Arnold Gandarillas 14 Мар 2018 в 01:35

Answer 2

Я не думаю, что в Jest есть встроенный синтаксис сопоставления. Вам нужно будет сделать это:

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

Поместив значение, которое вы хотите проверить, в expect().

0

theleebriggs 14 Мар 2018 в 01:22

Тестирование простого компонента React с использованием Jest и энзима - в чем я ошибся?

2 ответа

Похожие вопросы

Новые вопросы

javascript