如何模擬用於玩笑/酶測試的 css 導入？

Question

我需要在我的笑話/酶測試中模擬一個導入的 CSS 文件：

頭文件.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 的樣子：

頭文件.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>
  )
}

Answer 1

在你的 jest 配置中使用ignore-styles包。

npm install --save-dev ignore-styles

在您的 jest.config.js 文件中包含這些行

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

jest-css-modules是您可以嘗試的另一個包。

如何模擬用於玩笑/酶測試的 css 導入？

問題描述

1 個解決方案

解決方案1
3 已采納 2018-02-17 13:39:19

如何模擬用於玩笑/酶測試的 css 導入？

問題描述

1 個解決方案

解決方案1 3 已采納 2018-02-17 13:39:19

解決方案1
3 已采納 2018-02-17 13:39:19