我想编写一个测试来检查显示博客的组件是否呈现博客的标题和作者，

Question

我想编写一个测试来检查显示博客的组件是否呈现博客的标题和作者，但默认情况下不呈现其 url 或点赞数。

这是我的测试代码

 import '@testing-library/jest-dom/extend-expect'
import { render, fireEvent } from '@testing-library/react'
import Blog from './Blog'
import { element } from 'prop-types'

describe('tests', () => {
  const blog = {
    title:'We are best',
    author:'Rev',
    url:'something.com',
    likes:3
  }

  test('checks if url and likes are not rendered by default', () => {

    const component = render(
      <Blog blog={blog}/>
    )
    expect(component.container).toHaveTextContent(blog.title)
    expect(component.container).not.toHaveTextContent(blog.likes)
    component.debug()
    expect(component.container).not.toHaveTextContent('something.com')
  })
})

它测试的组件：

import React from 'react'
import Togglable from './Togglable'

const Blog = ({ blog,updateBlog,removingBlog }) => {
  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: 'solid',
    borderWidth: 1,
    marginBottom: 5,
  }
  const addLike = () => {
    updateBlog({
      ...blog,
      likes: blog.likes + 1,
    })
  }

  return (
    <div style={blogStyle} className='blog'>
      {blog.title}
      <Togglable buttonLabel='show'>
        <div>
          {blog.author}
        </div>
         likes:{blog.likes} <button onClick={addLike}> like </button>
        <div>
          {blog.url}
        </div>
        <div>
          <button onClick={() => removingBlog(blog.id, blog.title)}>remove</button>
        </div>
      </Togglable>
    </div>
  )}

export default Blog

处理显示或隐藏切换的可切换组件url/likes:

import React,{ useState } from 'react'

const Togglable = (props) => {
  const [visible, setVisible] = useState(false)

  const hideWhenVisible = { display : visible ? 'none' : '' }
  const showWhenVisible = { display : visible ? '' : 'none' }

  const toggleVisibility = () => {
    setVisible(!visible)
  }

  return (
    <div>
      <div style={hideWhenVisible}>
        <button onClick={toggleVisibility}>{props.buttonLabel}</button>
      </div>

      <div style={showWhenVisible}>
        {props.children}
        <button onClick={toggleVisibility}>cancel </button>
      </div>
    </div>
  )
}

export default Togglable

测试快照 snapshot

Answer 1

一种选择是使用 screen 而不是 component，因为 screen 考虑到了 style='display: none'。可以在 React Testing Library.

找到以下示例

import {render, screen} from '@testing-library/react'

render(
  <div>
    <label htmlFor="example">Example</label>
    <input id="example" />
  </div>,
)

const exampleInput = screen.getByLabelText('Example')

另外，你有没有试过问the Discord-channel of the course那个练习来自

我想编写一个测试来检查显示博客的组件是否呈现博客的标题和作者，

I want to write a test which checks that the component displaying a blog renders the blog's title and author,

testing

reactjs

jestjs