diff --git a/src/native/toHaveStyleRule.js b/src/native/toHaveStyleRule.js
index 9c076bd..b3a7cbf 100644
--- a/src/native/toHaveStyleRule.js
+++ b/src/native/toHaveStyleRule.js
@@ -16,9 +16,10 @@ function toHaveStyleRule(component, property, expected) {
*/
const mergedStyles = styles.reduce((acc, item) => ({ ...acc, ...item }), {})
const received = mergedStyles[camelCasedProperty]
- const matches = matcherTest(received, expected)
- // if expected value is not passed and we have a negated ".not" modifier we need to flip our assertion
- const pass = !expected && this.isNot ? !matches : matches
+ const pass =
+ !received && !expected && this.isNot
+ ? false
+ : matcherTest(received, expected)
return {
pass,
diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
index 9ff6d5e..5993fa6 100644
--- a/src/toHaveStyleRule.js
+++ b/src/toHaveStyleRule.js
@@ -123,9 +123,10 @@ function toHaveStyleRule(component, property, expected, options = {}) {
const declarations = getDeclarations(rules, property)
const declaration = declarations.pop() || {}
const received = declaration.value
- const matches = matcherTest(received, expected)
- // if expected value is not passed and we have a negated ".not" modifier we need to flip our assertion
- const pass = !expected && this.isNot ? !matches : matches
+ const pass =
+ !received && !expected && this.isNot
+ ? false
+ : matcherTest(received, expected)
return {
pass,
diff --git a/test/native/toHaveStyleRule.spec.js b/test/native/toHaveStyleRule.spec.js
index 379f571..26e53bf 100644
--- a/test/native/toHaveStyleRule.spec.js
+++ b/test/native/toHaveStyleRule.spec.js
@@ -92,6 +92,33 @@ test('negated ".not" modifier with no value', () => {
)
})
+test('negated ".not" modifier with value', () => {
+ const Button = styled.Text`
+ padding: 4px;
+ `
+
+ expect(renderer.create().toJSON()).not.toHaveStyleRule(
+ 'padding',
+ '2px'
+ )
+ expect(renderer.create().toJSON()).not.toHaveStyleRule(
+ 'padding',
+ ''
+ )
+ expect(renderer.create().toJSON()).not.toHaveStyleRule(
+ 'padding',
+ null
+ )
+ expect(renderer.create().toJSON()).not.toHaveStyleRule(
+ 'padding',
+ false
+ )
+ expect(renderer.create().toJSON()).not.toHaveStyleRule(
+ 'padding',
+ undefined
+ )
+})
+
test('jest asymmetric matchers', () => {
const Button = styled.Text`
background-color: ${({ transparent }) =>
diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
index 276ef82..d81ca78 100644
--- a/test/toHaveStyleRule.spec.js
+++ b/test/toHaveStyleRule.spec.js
@@ -152,6 +152,18 @@ test('negated ".not" modifier with no value', () => {
toHaveStyleRule(, 'opacity', '.65')
})
+test('negated ".not" modifier with value', () => {
+ const Button = styled.button`
+ opacity: 0.65;
+ `
+
+ notToHaveStyleRule(, 'opacity', '0.50')
+ notToHaveStyleRule(, 'opacity', '')
+ notToHaveStyleRule(, 'opacity', null)
+ notToHaveStyleRule(, 'opacity', false)
+ notToHaveStyleRule(, 'opacity', undefined)
+})
+
test('jest asymmetric matchers', () => {
const Button = styled.button`
border: 0.1em solid
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ec66e13..a921ed5 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -3,7 +3,7 @@ interface AsymmetricMatcher {
sample?: string | RegExp | object | Array | Function;
}
-type Value = string | number | RegExp | AsymmetricMatcher | undefined
+type Value = string | number | RegExp | AsymmetricMatcher | undefined;
interface Options {
media?: string;
@@ -14,6 +14,6 @@ interface Options {
declare namespace jest {
interface Matchers {
- toHaveStyleRule(property: string, value: Value, options?: Options): R;
+ toHaveStyleRule(property: string, value?: Value, options?: Options): R;
}
}