我想弄清楚为什么我的测试不会运行 . 我有一个React功能组件,它包含一个样式组件,它使用自定义方法生成一个媒体查询,该查询将被导入为css帮助文件 . 我得到了 TypeError: Cannot read property 'medium' of undefined
. 这是我的代码 .
css / index.js
export const media = (function(){
const sizes = {
large: 996,
medium: 767,
small: 656,
};
return Object.keys(sizes).reduce((acc, label) => {
acc[label] = (...args) => css`
@media (min-width: ${sizes[label] / 16}em) {
${css(...args)}
}
`;
return acc;
}, {});
})();
mycomponent
import { media } from 'css';
const MyComponent = ({ icon, title, description }) => (
<MyComponentContainer>
...
</MyComponentContainer>
);
export default MyComponent;
const MyComponentContainer = styled.article`
max-width: 300px;
width: 100%;
border: 1px solid #000;
${media.medium`
padding: 0 25px;
`}
${media.large`
max-width: 350px;
`}
`;
我的测试文件
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from 'components/MyComponent';
describe('<MyComponent />', () => {
it('should match the snapshot', () => {
const snap = shallow(<MyComponent />);
expect(snap).toMatchSnapshot();
});
});
我是新手做出反应测试,并不真正了解如何模拟该功能或告诉开玩家忽略它 .
1 回答
如果有其他人遇到这个,我找到了答案,它解释了很多关于测试的性质 .
在测试时,您只想一次测试一个组件或操作的功能(UNIT TESTING) . 通过尝试测试引入另一个依赖项的组件,我实际上试图一次测试两件事而没有意识到 .
MyComponent
组件需要与media
标记的模板方法分开测试 .在
MyComponent
中,我不关心从media
标记的模板方法返回的内容 . 我只关心调用什么方法和调用的参数 .我可以为
media
方法设置另一个单独的测试,以确保这些方法按预期运行并单独测试 .所以在
jest
中你可以模拟模块导入 .在我的测试文件中