包装器没有在 Jest 中定义

Question

我正在尝试测试我的一个 React 组件，但收到以下错误：

ReferenceError: wrapper is not defined

describe('TodaysHabits', () => {
  let component;
  beforeEach(() => {
    wrapper = shallow( < TodayHabits / > );
  });
  test('it exists', () => {
    expect(wrapper).toExist;
  });
  test('it contains an p tag', () => {
    const p = wrapper.find('p');
    expect(p.text()).toBe('this is display habits');
  });
});

index.js

import React from 'react';
import moment from 'moment';
import './todayhabits.css';

class TodayHabits extends React.Component {
  // This component will show the habits that the user has to complete this specific day
  // To do this we need to make a api call to get all habits where they have the respective day as true in the sql
  state = {
    dailyHabits: [],
  }

  //for each habit, it will display a new habit component
  //we need to pass a prop to each habit component containing that habit's id and title

  displayHabits () {
    return <p>this is display habits</p>
  }

  render() {
    return (
      <div id='dailyHabits'>
        { moment().format('dddd') }, <br/>
        { moment().format("Do MMMM YYYY") } <br/>
        {this.displayHabits()}
        <button onClick={() => { history.push(`/newHabit`) }}>Add a habit!</button>
      </div>
    )
  }
}

export default TodayHabits;

我尝试对修复此错误进行更多研究，但没有成功。

Answer 1

您可以尝试将wrapper 声明为变量吗？

您没有声明变量并直接为其赋值。

describe('TodaysHabits', () => {
  let component;
  let wrapper;
  beforeEach(() => {
    wrapper = shallow( < TodayHabits / > );
  });
  test('it exists', () => {
    expect(wrapper).toExist;
  });
  test('it contains an p tag', () => {
    const p = wrapper.find('p');
    expect(p.text()).toBe('this is display habits');
  });
});