Posted at

React コンポーネントのレンダリング結果をテストする

More than 1 year has passed since last update.

enzyme を使うと具体的な HTML を気にせず、あるコンポーネントが含まれているかなどを検証する変更に強いテストが書けます。一方で、テストが通らない時などには実際にどういう HTML が出力されるかがわかると便利です。

enzyme でのテストと HTML 文字列でのテストは次のように書くことができます。

import React from "react"

import Markdown from "./Markdown"
import { shallow } from "enzyme"
import { renderToStaticMarkup } from "react-dom/server"

describe("Markdown", () => {

// HTML文字列でテスト
it("should renders headers", () => {
const html = renderToStaticMarkup(<Markdown markdown="# hello" />)
expect(html).toEqual(`<div class="Markdown"><div><h1>hello</h1></div></div>`)
})

// enzyme でテスト
it("should renders emphasis", () => {
const wrapper = shallow(<Markdown markdown="*bold*" />)
expect(wrapper.contains(<em>bold</em>)).toEqual(true)
})
})