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

Question

让我们假设这个包含组件和单元测试的简单示例

组件.jsx

const theme = process.env.THEME
export const Component = ({ title }) => {
return (
<>
<h2>{theme} {title}</h2>
</>
)
}

component.test.jsx

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

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

这个问题有解决方案吗？

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

有没有更好的东西可以尝试使用？ 提前感谢大家

Answer 1

React.createContext 使用模拟上下文数据进行测试确实是最好的方法。