Update

Author: ovrmrw

src/__tests__/component.test.ts

@@ -1,22 +1,51 @@
 import * as React from 'react'
+import * as CSSModules from 'react-css-modules'
 import { shallow, ShallowWrapper } from 'enzyme'
 
 import { App } from '../app'
 import { Child } from '../child'
 import { ChildUsual } from '../child-usual'
 
+import * as appStyles from '../app.css'
+import * as childStyles from '../child.css'
+
 
 test('App can initialize', () => {
  const wrapper = shallow(React.createElement(App))
  expect(wrapper.length).toBe(1)
 })
 
+test('App text has class', () => {
+ const wrapper = shallowCSSModulesRenderer(App, appStyles)
+ expect(wrapper.find('#app-text').hasClass('my-style')).toBe(true)
+})
+
 test('Child can initialize', () => {
  const wrapper = shallow(React.createElement(Child))
  expect(wrapper.length).toBe(1)
 })
 
+test('Child text has class', () => {
+ const wrapper = shallowCSSModulesRenderer(Child, childStyles)
+ expect(wrapper.find('#child-text').hasClass('my-style')).toBe(true)
+})
+
 test('ChildUsual can initialize', () => {
  const wrapper = shallow(React.createElement(ChildUsual))
  expect(wrapper.length).toBe(1)
 })
+
+test('ChildUsual text has class', () => {
+ const wrapper = shallowCSSModulesRenderer(ChildUsual)
+ expect(wrapper.find('#child-usual-text').hasClass('my-style')).toBe(true)
+})
+
+
+
+function shallowCSSModulesRenderer<T, U>(component: any, styles?: any): ShallowWrapper<T, U> {
+ if (styles) {
+ return shallow(React.createElement(CSSModules(component, styles))) as any
+ } else {
+ return shallow(React.createElement(component)) as any
+ }
+}

src/app.css

@@ -1,10 +1,10 @@
 :root {
- --custome-bg-color: yellow;
+ --custom-bg-color: yellow;
 }
 
 
 .my-style {
- background-color: var(--custome-bg-color); /* using Custome Property */
+ background-color: var(--custom-bg-color); /* using Custom Property */
  color: blue;
  font-weight: bold;
 }

src/app.tsx

@@ -6,13 +6,13 @@ import { Child } from './child'
 import { ChildUsual } from './child-usual'
 
 
-export class App extends React.Component<{}, {}>{
+export class App extends React.Component<{}, {}> {
  render() {
  console.log('app props:', this.props) // {} (empty object)
  console.log('app state:', this.state) // null
  return (
  <div>
- <div styleName="my-style">
+ <div id="app-text" styleName="my-style">
  app text
  </div>
  <Child />

src/child-usual.tsx

@@ -4,13 +4,13 @@ import * as React from 'react'
 import * as styles from './child.css'
 
 
-export class ChildUsual extends React.Component<{}, {}>{
+export class ChildUsual extends React.Component<{}, {}> {
  render() {
  console.log('child-usual props:', this.props) // {} (empty object)
  console.log('child-usual state:', this.state) // null
  return (
  <div>
- <div className={styles['my-style']}>
+ <div id="child-usual-text" className={styles['my-style']}>
  child-usual text
  </div>
  </div >

src/child.css

@@ -1,9 +1,9 @@
 :root {
- --custome-bg-color: orange;
+ --custom-bg-color: orange;
 }
 
 
 .my-style {
  composes: my-style from './app.css'; /* extending .my-style from app.css */
- background-color: var(--custome-bg-color); /* using Custome Property */
+ background-color: var(--custom-bg-color); /* using Custom Property */
 }

src/child.tsx

@@ -3,13 +3,13 @@ import * as React from 'react'
 import './child.css'
 
 
-export class Child extends React.Component<{}, {}>{
+export class Child extends React.Component<{}, {}> {
  render() {
  console.log('child props:', this.props) // {} (empty object)
  console.log('child state:', this.state) // null
  return (
  <div>
- <div styleName="my-style">
+ <div id="child-text" styleName="my-style">
  child text
  </div>
  </div >

src/root.tsx

@@ -3,12 +3,12 @@ import * as React from 'react'
 import { App } from './app'
 
 
-export class Root extends React.Component<{}, {}>{
+export class Root extends React.Component<{}, {}> {
  render() {
  return (
  <div>
  <div className="my-style">
- root text {/* no css attached */}
+ root text {/* no CSS attached */}
  </div>
  <App />
  </div>