我正在尝试用反应路由器v4和jest酶做一个简单的测试 .
describe('<App />', () => {
it('renders a static text', () => {
const wrapper = shallow(
<MemoryRouter initialEntries={['/']} initialIndex={0}>
<App/>
</MemoryRouter>
console.log(wrapper.html());
);
});
});
当我尝试console.log(wrapper.html())时,我得到:
Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
我正在使用反应锅炉板项目 . 我想做的就是测试当我给它一个'/'的路径时,主页会呈现一些文本 .
任何帮助赞赏!谢谢!
EDIT :
This is the test:
it('test', () => {
const wrapper = shallow(
<MemoryRouter initialEntries={['/']} initialIndex={0}>
<Route path="/" render={() => <App/>}/>
</MemoryRouter>,
);
console.log(wrapper.find(App).html());
});
这是App类:
export default function App() {
return (
<AppWrapper>
<Helmet
titleTemplate="%s - React.js Boilerplate"
defaultTitle="React.js Boilerplate"
>
<meta name="description" content="A React.js Boilerplate application"/>
</Helmet>
<Header/>
<Switch>
<Route exact path="/" component={HomePage}/>
<Route path="/features" component={FeaturePage}/>
<Route
path="/catalog"
render={() => <div>hi</div>}
/>
<Route path="" component={NotFoundPage}/>
</Switch>
<Footer/>
</AppWrapper>
);
}
这是运行测试时的错误消息:
**Error: Method “html” is only meant to be run on a single node. 0 found instead.**
我期待这个页面匹配,我将能够console.log输出它:
<Route exact path="/" component={HomePage}/>
2 回答
你为什么要调用
shallow
中的console.log?我以前从未见过这个...尝试将<App />
组件包装在<Route />
中,并在其中搜索一些标签 . 例如 . 假设你有这个简单的组件:测试看起来像这样:
UPDATE 碰巧,react-boilerplate增加了太多的包装和依赖 . 因此,对于成功的测试,我们需要以不同的方式克服它们......
这就是我完成它的方式(我的
react-boilerplate/app/tests/simple.test.js
的全部内容):我认为这是相当整合而不是单元测试...输出
console.log
:超级简单的方法,无需所有
<MemoryRouter>
或<Route>
标签在您的App组件中,将
export
添加到您的 class .然后在
spec.js
文件中,只需导入组件进行测试,如下所示: