文章/答案/技术大牛

发布

社区首页 >问答首页 >如何模拟css导入以进行jest/酶测试？

问如何模拟css导入以进行jest/酶测试？
EN

Stack Overflow用户

提问于 2018-02-17 13:22:42

回答 1查看 9.3K关注 0票数 6

我需要在jest/酶测试中模拟导入的CSS文件：

Header.test.js

import React from 'react'
import { shallow } from 'enzyme'
import { Header } from './Header'

jest.mock('semantic-ui-css/semantic.min.css') // <-- no effect...

it('should render page title', () => {
  const wrapper = shallow(<Header title='Test' />)
  expect(wrapper.find('title').text()).toEqual('Test')
})

我确实得到了import 'semantic-ui-css/semantic.min.css'行的错误：

Test suite failed to run

    /Users/node_modules/semantic-ui-css/semantic.min.css:11
    @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
    ^

    SyntaxError: Invalid or unexpected token

我不需要为测试导入css文件。因此，我想在测试中模拟这个导入。我怎么能这么做？

我试着做jest.mock('semantic-ui-css/semantic.min.css')，但这不起作用。

这就是Header.js的样子：

Header.js

import Head from 'next/head'
import 'semantic-ui-css/semantic.min.css'

export const Header = props => {
  return (
    <Head>
      <meta http-equiv='content-type' content='text/html;charset=UTF-8' />
      <meta charset='utf-8' />
      <title>{props.title}</title>
      <link rel='icon' href='/static/favicon.ico' />
      <link rel='stylesheet' href='/_next/static/style.css' />
    </Head>
  )
}

jestjs

enzyme

javascript

reactjs

unit-testing

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-17 13:39:19

在jest配置中使用忽略样式包。

npm install --save-dev ignore-styles

在您的jest.config.js文件中包括以下行

import register from 'ignore-styles';
register(['.css', '.sass', '.scss']);

jest-css-模块是您可以尝试的另一个包。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48841785

复制

相似问题

问如何模拟css导入以进行jest/酶测试？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何模拟css导入以进行jest/酶测试？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何模拟css导入以进行jest/酶测试？
EN