javascript - 如何管理包含主题数据的组件的单元测试快照？

Question

让我们假设这个简单的例子有一个组件和一个单元测试

组件.jsx

const theme = process.env.THEME

export const Component = ({ title }) => {
  return (
    <>
        <h2>{theme} {title}</h2>
    </>
  )
}

组件.test.jsx

import { Component } from './Component'

describe('<Component />', () => {
  it('renders properly', () => {
    const wrapper = shallow(<Context {...props} />)
    expect(wrapper).toMatchSnapshot()
  })
})

我正在运行的项目取决于 const theme，因此在我的管道中，我有更多的构建、更多的部署，每个主题一个。当然，快照失败是因为每次我运行toMatchSnapshot()功能时，它都会写入/检查文件夹中的输出./__snapshots__，因此第一个主题的测试成功运行，然后其他主题的测试失败。

这个问题有解决方案吗？

1. 为每个组件提供主题作为道具（可怕的方法）
2. 避免这些组件的快照（不是很好的方法，因为我想为我的测试套件保留此功能）
3. 使用 React.createContext （好方法，但它需要在整个项目中进行一些重构）

我可以尝试使用更好的东西吗？提前谢谢大家

标签： javascriptreactjsunit-testingthemessnapshot

Answer 1

带有用于测试的模拟上下文数据的 React.createContext 确实是最好的方法。