问题描述
这是我的第一个带有SSR的Nextjs项目。
集成用于Reactjs UI测试的酶时。 “ React”是指UMD全局文件，但当前文件是一个模块。请考虑添加导入。”
但是当我使用普通的Reactjs Component（Functional或Class）时它是可行的。任何人都可以提出建议。
沙盒链接-https://codesandbox.io/s/currying-moon-gdk09
来自GitHub的完整代码-https://github.com/Rizz13/nextJs-with-Enzyme
运行测试使用“ npm测试”
页面/Index.tsx
import Head from 'next/head'
import Link from 'next/link'
import { GetStaticProps } from 'next'
export default function Home({
allPostsData
}: {
allPostsData: {
title: string
id: string
}[]
}) {
return (
<>
<Head>
<title>Sample Page</title>
</Head>
<section className="icon-stars">
<p>[Your Self Introduction]</p>
<p>
(This is a sample website - you’ll be building a site like...)
</p>
</section>
<section>
<h2>Blog</h2>
<ul>
{allPostsData.map(({ id,title }) => (
<li key={id}>
<Link href="#">
<a>{title}</a>
</Link>
<br />
</li>
))}
</ul>
</section>
</>
)
}
export const getStaticProps: GetStaticProps = async () => {
const allPostsData = [{id: 0,title:"Sample1"},{id: 1,title:"Sample2"}]
return {
props: {
allPostsData
}
}
}
_ 测试 _ / Index.tsx
import * as React from 'react'
import { expect as expect1 } from 'chai';
import IndexPage from '../pages/index'
import {/*mount,*/ shallow} from 'enzyme'
const setUp1 = (data) => {
return shallow(<IndexPage {...data} />);
}
let wrapper;
describe('props Check',() => {
beforeEach(() => {
wrapper = setUp1({});
});
it('should render an `.icon-stars`',() => {
expect1(wrapper.find('.icon-stars')).to.have.length(1);
});
});
解决方法
测试 /Index.tsx
import * as React from 'react'
import { expect as expect1 } from 'chai';
import IndexPage from '../pages/index'
import {/*mount,*/ shallow} from 'enzyme'
const setUp1 = (data) => {
return shallow(<IndexPage {...data} />);
}
let wrapper;
describe('props Check',() => {
beforeEach(() => {
wrapper = setUp1(allPostsData={[]});
});
it('should render an `.icon-stars`',() => {
expect1(wrapper.find('.icon-stars')).to.have.length(1);
});
});
您必须在测试组件内部传递道具并使用
import * as React from 'react'
在 pages / Index.tsx 中呈现反应组件