Question

我有一个反应中的Nav组件，它将User对象作为道具放入组件中。根据他们是否已登录，我会更改导航的样子。问题是当我测试组件并将props传递给它时 - 组件似乎没有考虑传入的props并且只呈现if语句的false部分。

这是我的组件中的渲染函数，但在Jest中测试时似乎只呈现else部分 - 但在生产中正确呈现：

render () {
    const user: User = this.props.user

    if (user.isAuthenticated) {
      return this.userLoggedIn(user)
    } else {
      return this.userLoggedOut()
    }
  }

这是我正在运行的测试 - 我只是想找到一个只应在user.isAuthenticated = true

时呈现的img标记

it('Should display text', () => {

const user = {
    isAuthenticated: true
  }
  const store = createStore(combineReducers({ user: authReducer }))
  const logOut = sinon.spy()

  const props = {
    user,
    logOut
  }

  const wrapper = mount(
    <Provider store={store}>
      <Nav {...props} />
    </Provider>
  )

    const imgTag = wrapper.find('img')

    expect(imgTag.length).toEqual(1)
  })

Answer 1

您应该测试条件真实条件和错误条件。您的测试仅检查错误情况，因为您编写了错误条件的测试

Jest Testing If组件中的语句未呈现

1 个答案: