javascript - 使用 Jest 和 enzyme 测试简单的 React 组件 - 我做错了什么？

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

开始按钮

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;

错误

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.

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

});